/*
 * COMOS — שירות ופניות · Front-end styles
 *
 * Mobile first. The base rules are the phone; wider screens add room, never a
 * different screen.
 *
 * Every colour, size and spacing value comes from tokens.css through var().
 * Nothing here may hard-code one — a literal would sit outside the WCAG audit
 * and outside any future theme change.
 *
 * Logical properties throughout (inline-start, block-end). The interface is
 * RTL, and physical left/right would silently break if it were ever rendered
 * the other way round.
 *
 * Created by Eli Toyster | ToysterMedia
 */

/* --- Shared shell ------------------------------------------------------- */

.comos-sr {
	direction: rtl;
	text-align: start;
	font-family: var(--csr-font);
	font-size: var(--csr-size-base);
	line-height: var(--csr-line-height);
	color: var(--csr-text);
	max-width: 640px;
	margin-inline: auto;
}

.comos-sr *,
.comos-sr *::before,
.comos-sr *::after {
	box-sizing: border-box;
}

.comos-sr p {
	margin-block: 0 var(--csr-space-3);
}

/* Buttons are links here, so the shared button rules from tokens.css need the
   layout an <a> does not bring with it. */
.comos-sr__button {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--csr-space-2);
	width: 100%;
	min-height: var(--csr-touch-default);
	padding: var(--csr-space-3) var(--csr-space-4);
	text-decoration: none;
	text-align: center;
	margin-block-end: var(--csr-space-3);
}

.comos-sr__button:last-child {
	margin-block-end: 0;
}

.comos-sr__help {
	font-size: var(--csr-size-min);
	color: var(--csr-text-muted);
	margin-block: 0 var(--csr-space-3);
}

/* --- W01 · entry card ---------------------------------------------------- */

.comos-sr-widget__card {
	border: 1px solid var(--csr-border-control);
	border-radius: var(--csr-radius);
	background: var(--csr-bg);
	padding: var(--csr-space-4);
}

/* Applied by the script only when something actually awaits the member, so an
   empty state never shouts. */
.comos-sr-widget__card--attention {
	border-color: var(--csr-accent-line);
	background: var(--csr-accent-soft);
}

.comos-sr-widget__head {
	display: flex;
	align-items: center;
	gap: var(--csr-space-3);
}

.comos-sr-widget__icon {
	inline-size: 28px;
	block-size: 28px;
	flex: 0 0 28px;
	fill: var(--csr-action);
}

.comos-sr-widget__title {
	font-size: var(--csr-size-base);
	font-weight: var(--csr-weight-medium);
	margin: 0;
}

/* The container the script writes into. It has no height of its own while
   empty, so the cached layout does not reserve a gap that never fills. */
.comos-sr-widget__summary:empty {
	display: none;
}

.comos-sr-widget__summary {
	margin-block: var(--csr-space-3);
}

.comos-sr-widget__row {
	display: flex;
	align-items: center;
	gap: var(--csr-space-3);
}

.comos-sr-widget__line {
	flex: 1;
	font-size: var(--csr-size-min);
	color: var(--csr-text-muted);
	margin: 0;
}

/* The border is --csr-warning-line, not --csr-accent-line.
   The badge appears inside the attention card, whose ground is
   --csr-accent-soft — the same hue family as the badge itself. Against that
   ground the accent line measures 2.82:1 and the badge fill 1.49:1, so the
   badge's outline would be the only thing separating it and it would not be
   perceivable. --csr-warning-line clears 3:1 against both grounds it can sit
   on: 4.07:1 on white and 3.64:1 on the soft ground. */
.comos-sr-widget__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-inline-size: 26px;
	block-size: 26px;
	padding-inline: var(--csr-space-2);
	border-radius: 13px;
	background: var(--csr-accent);
	color: var(--csr-text);
	border: 2px solid var(--csr-warning-line);
	font-size: var(--csr-size-min);
	font-weight: var(--csr-weight-bold);
}

.comos-sr-widget__action {
	margin-block-start: var(--csr-space-3);
}

/* --- W02 · gateway ------------------------------------------------------- */

.comos-sr-gateway__title {
	font-size: 22px;
	font-weight: var(--csr-weight-medium);
	margin-block: 0 var(--csr-space-2);
}

.comos-sr-gateway__lede {
	font-weight: var(--csr-weight-medium);
	margin-block: var(--csr-space-4) var(--csr-space-2);
}

.comos-sr-gateway__domains {
	list-style: none;
	margin: 0;
	padding: 0;
}

.comos-sr-gateway__rule {
	border: none;
	border-block-start: 1px solid var(--csr-border);
	margin-block: var(--csr-space-5);
}

.comos-sr-gateway__action {
	margin-block-start: var(--csr-space-3);
}

/* --- Tiles --------------------------------------------------------------- */

.comos-sr-tile {
	display: flex;
	align-items: flex-start;
	gap: var(--csr-space-3);
	inline-size: 100%;
	min-block-size: var(--csr-touch-default);
	padding: var(--csr-space-4);
	border: 1px solid var(--csr-border-control);
	border-radius: var(--csr-radius);
	background: var(--csr-bg);
	margin-block-end: var(--csr-space-3);
	text-align: start;
	text-decoration: none;
	color: var(--csr-text);
	font: inherit;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

/* 1.3.0-dev.5-test.1, item 2 (Eli): "clear card states: normal, hover,
 * selected, focus-visible" — the rule below this one only ever matched
 * `a.comos-sr-tile`, but the service tiles built by partials/services.php
 * are `<label>` elements wrapping a hidden radio (see the comment on
 * .comos-sr-tile__radio further down), never an `<a>`. That selector has
 * therefore never matched a single one of these cards — there was no
 * hover state at all on the actual service-selection screen. This one
 * covers every tile regardless of the wrapping element.
 */
.comos-sr-tile:hover {
	border-color: var(--csr-action);
}

.comos-sr-tile--off {
	background: var(--csr-surface);
	border-style: dashed;
	color: var(--csr-text-muted);
}

.comos-sr-tile--static {
	border-style: solid;
	border-width: 1px;
}

/* Block, not inline. As spans inside a flex parent these would run together on
   one line and the tile would read as a single sentence. */
.comos-sr-tile__body {
	flex: 1;
	display: block;
}

.comos-sr-tile__title {
	display: block;
	font-size: var(--csr-size-base);
	font-weight: var(--csr-weight-medium);
}

.comos-sr-tile__desc {
	display: block;
	font-size: var(--csr-size-min);
	color: var(--csr-text-muted);
	margin-block-start: var(--csr-space-1);
}

.comos-sr-pill {
	display: inline-flex;
	align-items: center;
	padding: var(--csr-space-1) var(--csr-space-3);
	border-radius: var(--csr-radius);
	font-size: var(--csr-size-min);
	font-weight: var(--csr-weight-medium);
	margin-block-start: var(--csr-space-2);
}

.comos-sr-pill--soon {
	background: var(--csr-state-new-bg);
	color: var(--csr-state-new-text);
}

/* --- W19 · states -------------------------------------------------------- */

.comos-sr-state {
	text-align: center;
	padding: var(--csr-space-6) var(--csr-space-4);
	color: var(--csr-text-muted);
}

.comos-sr-state__icon {
	font-size: 44px;
	line-height: 1;
	margin: 0;
}

.comos-sr-state__title {
	font-size: var(--csr-size-base);
	font-weight: var(--csr-weight-bold);
	color: var(--csr-text);
	margin-block: var(--csr-space-3) var(--csr-space-2);
}

.comos-sr-state__action {
	margin-block-start: var(--csr-space-3);
}

/* --- Wider screens ------------------------------------------------------- */

@media (min-width: 600px) {

	.comos-sr-gateway__title {
		font-size: var(--csr-size-title);
	}

	/* Full-width buttons look stranded on a desktop. They keep the same touch
	   height — the target never shrinks, only the width. */
	.comos-sr__button {
		inline-size: auto;
		min-inline-size: 260px;
	}

	.comos-sr-widget__action,
	.comos-sr-gateway__action {
		inline-size: 100%;
	}
}

/* Respect a reduced-motion preference. Nothing here animates today; the rule
   is here so that anything added later inherits the courtesy. */
@media (prefers-reduced-motion: reduce) {

	.comos-sr *,
	.comos-sr *::before,
	.comos-sr *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

/* --- The wizard ---------------------------------------------------------- */

.comos-sr-steps {
	display: flex;
	gap: var(--csr-space-2);
	list-style: none;
	margin: 0 0 var(--csr-space-2);
	padding: 0;
}

.comos-sr-steps__item {
	flex: 1;
	block-size: 6px;
	border-radius: 3px;
	background: var(--csr-border);
}

.comos-sr-steps__item.is-done {
	background: var(--csr-brand-green);
}

.comos-sr-steps__item.is-current {
	background: var(--csr-action);
}

.comos-sr-wizard__title {
	font-size: 22px;
	font-weight: var(--csr-weight-medium);
	margin-block: var(--csr-space-2) var(--csr-space-4);
}

/* Step 3 breadcrumb — shows domain › target › service chosen in steps 1-2. */
.comos-sr-wizard__breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px;
	margin-block-end: var(--csr-space-4);
	padding: 8px 12px;
	background: var(--csr-surface-soft);
	border-radius: var(--csr-radius);
	font-size: var(--csr-size-min);
	color: var(--csr-text-muted);
}

.comos-sr-wizard__crumb {
	font-weight: var(--csr-weight-medium);
	color: var(--csr-text);
}

.comos-sr-wizard__crumb-sep {
	color: var(--csr-text-muted);
	font-size: 12px;
}

.comos-sr-wizard__lede {
	font-weight: var(--csr-weight-medium);
	margin-block: var(--csr-space-4) var(--csr-space-2);
}

/* Tiles are labels wrapping a radio, so the whole tile is the target rather
   than a small circle beside it. */
.comos-sr-tile__radio {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
	clip-path: inset(50%);
}

/* Visual selection state.
 *
 * Two mechanisms — both scoped under .comos-sr so they carry specificity (0,2,0)
 * and beat typical theme rules such as `label` (0,1,0) or `.entry-content label`
 * (0,1,1) without any !important.
 *
 *   :has( input:checked ) — CSS-native; works without JavaScript in Chrome/Edge
 *   105+, Firefox 121+, Safari 15.4+. Also survives bfcache restoration because
 *   the browser restores both form state AND applies :has() immediately.
 *
 *   .comos-sr-tile--on   — JavaScript fallback; toggled by syncTilesForName()
 *   in wizard.js for older engines and for the bfcache pageshow handler.
 *
 * Both selectors share the same declaration block so they are never out of sync.
 */
.comos-sr .comos-sr-tile--on,
.comos-sr .comos-sr-tile:has( input[type="radio"]:checked ) {
	border-color: var(--csr-action);
	border-width: 3px;
	background: var(--csr-state-accepted-bg);
}

/* The visible focus ring has to follow the hidden radio to its label,
   otherwise keyboard users get no indication at all. */
.comos-sr-tile__radio:focus-visible + .comos-sr-tile__body,
.comos-sr-tile:focus-within {
	outline: 3px solid var(--csr-action);
	outline-offset: 2px;
}

.comos-sr-price {
	display: block;
	font-size: var(--csr-size-base);
	font-weight: var(--csr-weight-medium);
	color: var(--csr-text);
	margin-block-start: var(--csr-space-1);
}

.comos-sr-disclaimer {
	background: var(--csr-warning-bg);
	border-inline-start: 4px solid var(--csr-warning-line);
	padding: var(--csr-space-2) var(--csr-space-3);
	border-radius: var(--csr-radius);
	font-size: var(--csr-size-min);
	margin-block: var(--csr-space-2) var(--csr-space-4);
}

/* --- Fields -------------------------------------------------------------- */

.comos-sr-field {
	margin-block-end: var(--csr-space-4);
}

.comos-sr-field label {
	display: block;
	font-weight: var(--csr-weight-medium);
	margin-block-end: var(--csr-space-1);
}

.comos-sr-field input,
.comos-sr-field textarea,
.comos-sr-field select {
	inline-size: 100%;
	min-block-size: var(--csr-touch-default);
	font: inherit;
	font-size: var(--csr-size-base);
	color: var(--csr-text);
	background: var(--csr-bg);
	border: 1px solid var(--csr-border-control);
	border-radius: var(--csr-radius);
	padding: var(--csr-space-3);
}

/* 1.3.0-dev.5-test.1, item 2 (Eli): a plain <select> was left with the
 * browser's own native arrow. On this RTL page that arrow rendered on
 * whichever side the browser's built-in styling defaults to (not
 * necessarily the inline-end side text actually reads toward), and on
 * some engines the SITE THEME's own generic `select` rule adds a second,
 * different-looking arrow on top of the native one — two inconsistent
 * arrows on the same control. `appearance: none` removes the native one
 * everywhere (Firefox needs its own prefix; there is no evergreen
 * unprefixed-only path yet), and a single inline SVG chevron replaces it,
 * positioned on the physical left — which IS the inline-end side on this
 * RTL page — exactly where a select's affordance is conventionally read.
 */
.comos-sr-field select {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235B6270' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: left var(--csr-space-3) center;
	background-size: 12px 8px;
	padding-inline-end: calc(var(--csr-space-3) + 20px);
}

.comos-sr-field select::-ms-expand {
	display: none;
}

.comos-sr-field--error input,
.comos-sr-field--error textarea {
	border-color: var(--csr-danger-text);
	border-width: 2px;
}

.comos-sr-error {
	color: var(--csr-danger-text);
	font-weight: var(--csr-weight-medium);
	margin-block: var(--csr-space-2) 0;
}

.comos-sr-errors {
	background: var(--csr-danger-bg);
	color: var(--csr-danger-text);
	border-radius: var(--csr-radius);
	padding: var(--csr-space-3) var(--csr-space-4);
	margin-block-end: var(--csr-space-4);
}

.comos-sr-errors__title {
	font-weight: var(--csr-weight-bold);
	margin-block-end: var(--csr-space-2);
}

.comos-sr-errors ul {
	margin: 0;
	padding-inline-start: var(--csr-space-5);
}

.comos-sr-errors a {
	color: inherit;
}

/* --- Urgency ------------------------------------------------------------- */

.comos-sr-urgency {
	border: 1px solid var(--csr-border-control);
	border-radius: var(--csr-radius);
	padding: var(--csr-space-3);
	margin-block-end: var(--csr-space-4);
}

.comos-sr-urgency legend {
	font-weight: var(--csr-weight-medium);
	padding-inline: var(--csr-space-2);
}

.comos-sr-urgency__option {
	display: flex;
	align-items: center;
	gap: var(--csr-space-2);
	min-block-size: var(--csr-touch-min);
}

.comos-sr-pill--normal {
	background: var(--csr-urgency-normal-bg);
	color: var(--csr-urgency-normal-text);
}

.comos-sr-pill--urgent {
	background: var(--csr-urgency-urgent-bg);
	color: var(--csr-urgency-urgent-text);
}

.comos-sr-pill--emergency {
	background: var(--csr-urgency-emergency-bg);
	color: var(--csr-urgency-emergency-text);
}

/* --- Summary and confirmation -------------------------------------------- */

.comos-sr-summary {
	inline-size: 100%;
	border-collapse: collapse;
	border: 1px solid var(--csr-border-control);
	border-radius: var(--csr-radius);
	overflow: hidden;
	margin-block: var(--csr-space-3);
}

.comos-sr-summary th,
.comos-sr-summary td {
	text-align: start;
	padding: var(--csr-space-3);
	border-block-end: 1px solid var(--csr-border);
	vertical-align: top;
	font-size: var(--csr-size-min);
}

.comos-sr-summary tr:last-child th,
.comos-sr-summary tr:last-child td {
	border-block-end: none;
}

.comos-sr-card--quiet {
	background: var(--csr-surface);
}

.comos-sr-card__title {
	font-size: var(--csr-size-base);
	font-weight: var(--csr-weight-medium);
	margin-block: var(--csr-space-1) 0;
}

.comos-sr-ticket-number {
	font-size: 22px;
	font-weight: var(--csr-weight-bold);
	color: var(--csr-text);
}

.comos-sr-resume {
	background: var(--csr-accent-soft);
	border-inline-start: 4px solid var(--csr-accent-line);
	border-radius: var(--csr-radius);
	padding: var(--csr-space-3) var(--csr-space-4);
	margin-block-end: var(--csr-space-4);
}

.comos-sr-resume__title {
	font-weight: var(--csr-weight-medium);
}

.comos-sr--centred {
	text-align: center;
}

/* Visually hidden, still announced. */
.comos-sr__sr-only {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

[aria-busy="true"] {
	cursor: progress;
}

/* --- The price note ------------------------------------------------------ */

/* Attached to the amount, and visibly quieter than it: a qualification, not a
   second price. The general disclaimer keeps its own box at the foot of the
   screen, so the two are never read as one sentence. */
.comos-sr-price__note {
	display: block;
	font-size: var(--csr-size-min);
	color: var(--csr-text-muted);
	margin-block-start: var(--csr-space-1);
}

/* --- "You already have one of these open" -------------------------------- */

.comos-sr-similar {
	background: var(--csr-accent-soft);
	border-inline-start: 4px solid var(--csr-accent-line);
	border-radius: var(--csr-radius);
	padding: var(--csr-space-3) var(--csr-space-4);
	margin-block-end: var(--csr-space-4);
}

/* The stronger notice — service AND location agree — reads as a warning
   rather than as information. Two signals, not one. */
.comos-sr-similar--strong {
	background: var(--csr-warning-bg);
	border-inline-start-color: var(--csr-warning-line);
}

.comos-sr-similar__title {
	font-weight: var(--csr-weight-bold);
	margin-block-end: var(--csr-space-1);
}

.comos-sr-closure {
	background: var(--csr-danger-bg);
	border-inline-start: 4px solid var(--csr-danger-text);
	border-radius: var(--csr-radius);
	padding: var(--csr-space-3) var(--csr-space-4);
	margin-block: var(--csr-space-4);
}

/* --- My requests --------------------------------------------------------- */

.comos-sr-tabs {
	display: flex;
	border-block-end: 2px solid var(--csr-border);
	margin-block-end: var(--csr-space-4);
}

.comos-sr-tab {
	flex: 1;
	display: flex;
	/* 1.3.0-dev.5-test.5: mobile default is number-over-label, centered —
	 * a row here let three labels of different lengths wrap unevenly, and
	 * nothing tied a given count to the word beside it at a glance. Column
	 * with a small fixed gap keeps each badge directly under its own tab
	 * text regardless of how the label wraps. Desktop reverts to a row
	 * below (min-width: 600px), where there is room for both on one line. */
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--csr-space-1);
	min-block-size: var(--csr-touch-min);
	padding: var(--csr-space-3) var(--csr-space-2);
	font-size: var(--csr-size-min);
	font-weight: var(--csr-weight-medium);
	color: var(--csr-text-muted);
	text-decoration: none;
	border-block-end: 3px solid transparent;
	margin-block-end: -2px;
}

/* 1.3.0-dev.5-test.6: the number above the label, on mobile, WITHOUT
 * reordering the DOM. The markup puts the label text before the badge
 * (the label is read first — the correct source order), so
 * flex-direction: column alone rendered the badge under the label,
 * matching DOM order but not the agreed layout. `order` moves it
 * visually only, so the badge paints first while a screen reader still
 * meets the label first. Scoped to this badge inside this tab, never
 * .comos-sr-widget__badge globally — other badges (e.g. on the board)
 * keep their own document order. */
.comos-sr-tab .comos-sr-widget__badge {
	order: -1;
}

.comos-sr-tab.is-current {
	color: var(--csr-action);
	border-block-end-color: var(--csr-action);
}

.comos-sr-card {
	border: 1px solid var(--csr-border-control);
	border-radius: var(--csr-radius);
	background: var(--csr-bg);
	padding: var(--csr-space-3) var(--csr-space-4);
	margin-block-end: var(--csr-space-3);
	/* 1.3.0-dev.5-test.4, item 3: height follows content — never a fixed
	 * or minimum block-size. A card with a service line, a closure reason
	 * and two actions is taller than a bare open request, and it should
	 * be: forcing them to match would either clip the longer one or pad
	 * the shorter one with empty space. */
}

/* A request waiting on the member, marked by border AND by the status text
   beside it — never by colour alone. */
.comos-sr-card--attention {
	border-color: var(--csr-accent-line);
	border-width: 2px;
}

/* 1.3.0-dev.5-test.4, item 3: every direct <p> inside a card (meta line,
 * service, title, closure reason) shares one tighter rhythm instead of
 * each inheriting the page-wide .comos-sr p bottom margin (--csr-space-3,
 * 12px) — on a card with four or five of these lines that added up to a
 * lot of air that carried no information. The card's own title keeps its
 * distinct (slightly larger) spacing below, since it is the one line that
 * is meant to stand apart from the meta lines around it. */
.comos-sr-card > p:not(.comos-sr-card__title) {
	margin-block: 0 var(--csr-space-2);
}

.comos-sr-card > p:not(.comos-sr-card__title):last-child {
	margin-block-end: 0;
}

/* :not(.comos-sr-card__title) above, deliberately — without it this rule's
 * own specificity (a class plus an element type) would beat the single
 * class selector below and silently overwrite the title's own margin,
 * which is meant to stay visually distinct from the tighter meta rhythm
 * around it. */
.comos-sr-card__title {
	font-size: var(--csr-size-base);
	font-weight: var(--csr-weight-medium);
	margin-block: var(--csr-space-1) var(--csr-space-2);
}

.comos-sr-card__meta {
	font-size: var(--csr-size-min);
	color: var(--csr-text-muted);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--csr-space-2);
}

/* The card's own actions area — "view", plus archive/restore when either
 * applies, all inside the same card (item 2). A dedicated wrapper rather
 * than reusing .comos-sr-card__meta's flex rules: this row holds buttons,
 * not text, so it needs its own gap, top margin and wrapping behaviour,
 * explicit enough that it cannot silently inherit a themed look from
 * Elementor's own row/button defaults (the site this plugin runs on).
 *
 * `form` children get `display: contents` so a <form> posting the
 * archive/restore action does not introduce its own box in the row — the
 * <button> inside it becomes a direct flex item of .comos-sr-card__actions,
 * laid out exactly like the plain <a> "view" button beside it. */
.comos-sr-card__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--csr-space-2);
	margin-block-start: var(--csr-space-3);
}

.comos-sr-card__actions form {
	display: contents;
}

/* Overrides .comos-sr__button's own full-width, 56px-tall default (right
 * for the page's one primary action, wrong for a row of secondary card
 * actions): auto width so buttons sit side by side and wrap onto their
 * own line on a narrow screen rather than overflowing it, 48px
 * (--csr-touch-min) rather than 56px (--csr-touch-default) — still clears
 * the 44px floor, but this row does not need the primary button's full
 * height — and no bottom margin of its own, since the row's own `gap`
 * (also --csr-space-2, so horizontal and wrapped-vertical spacing match)
 * already provides consistent spacing on every side. Padding, radius,
 * border and colour all still come from the shared .comos-sr__button /
 * --secondary / --ghost rules in tokens.css, so a card action button is
 * visually the same family as every other button in the plugin — only
 * its size and layout role here differ. */
.comos-sr .comos-sr-card__actions .comos-sr__button {
	width: auto;
	min-width: 0;
	min-height: var(--csr-touch-min);
	margin-block-end: 0;
}

.comos-sr-my__new {
	margin-block-start: var(--csr-space-4);
}

/* --- Ticket detail ------------------------------------------------------- */

.comos-sr-ticket__title {
	font-size: 20px;
	font-weight: var(--csr-weight-medium);
	margin-block: var(--csr-space-2);
}

.comos-sr-ticket__section {
	font-size: var(--csr-size-base);
	font-weight: var(--csr-weight-medium);
	margin-block: var(--csr-space-5) var(--csr-space-2);
}

.comos-sr-message {
	background: var(--csr-surface);
	border-radius: var(--csr-radius);
	padding: var(--csr-space-3);
	margin-block-end: var(--csr-space-3);
}

.comos-sr-message--mine {
	background: var(--csr-state-accepted-bg);
	border: 1px solid var(--csr-action);
}

.comos-sr-timeline {
	list-style: none;
	margin: 0;
	padding-inline-start: var(--csr-space-4);
	border-inline-start: 2px solid var(--csr-border);
}

.comos-sr-timeline li {
	position: relative;
	padding-block-end: var(--csr-space-4);
}

.comos-sr-timeline li::before {
	content: "";
	position: absolute;
	inset-inline-start: calc(-1 * var(--csr-space-4) - 6px);
	inset-block-start: 6px;
	inline-size: 10px;
	block-size: 10px;
	border-radius: 50%;
	background: var(--csr-action);
}

.comos-sr-timeline time {
	display: block;
	font-size: 14px;
	color: var(--csr-text-muted);
}

/* --- Status pills -------------------------------------------------------- */

.comos-sr-pill--new       { background: var(--csr-state-new-bg);       color: var(--csr-state-new-text); }
.comos-sr-pill--accepted  { background: var(--csr-state-accepted-bg);  color: var(--csr-state-accepted-text); }
.comos-sr-pill--progress  { background: var(--csr-state-progress-bg);  color: var(--csr-state-progress-text); }
.comos-sr-pill--waiting   { background: var(--csr-state-waiting-bg);   color: var(--csr-state-waiting-text); }
.comos-sr-pill--resolved  { background: var(--csr-state-resolved-bg);  color: var(--csr-state-resolved-text); }
.comos-sr-pill--closed    { background: var(--csr-state-closed-bg);    color: var(--csr-state-closed-text); }
.comos-sr-pill--rejected  { background: var(--csr-state-rejected-bg);  color: var(--csr-state-rejected-text); }

/* The service a request was filed under. Shown beside the title because the
   title is derived from the description, and two requests that open with the
   same sentence would otherwise be indistinguishable in a list. */
.comos-sr-card__service,
.comos-sr-ticket__service {
	font-size: var(--csr-size-min);
	font-weight: var(--csr-weight-medium);
	color: var(--csr-action);
}

.comos-sr-ticket__service {
	font-size: var(--csr-size-base);
	color: var(--csr-text);
}

/* --- The personal page's panel ------------------------------------------- */
/*
 * RC.2, priority 4: .comos-sr-account used to be defined three times in this
 * file (here, in the 0.14.0 host-theme-fight pass, and again in the isolation
 * pass below) with overlapping and in places dead properties — a later block
 * would silently cancel an earlier one's margin or width and nobody could
 * tell from reading either block alone. This is now the one definition; the
 * two later sections keep only what is genuinely additional (the universal
 * box-sizing reset and the isolation comment), not a second copy of the box
 * model.
 */
.comos-sr-account {
	box-sizing: border-box;
	border: 1px solid var(--csr-border-control);
	border-radius: var(--csr-radius);
	background: var(--csr-bg);
	padding: var(--csr-space-4);
	margin: 0;
	inline-size: 100%;
	max-inline-size: none;      /* themes love a max-width on content children */
	text-align: start;          /* not `right`: the direction decides */
}

.comos-sr-account > * + * {
	margin-block-start: var(--csr-space-3);
}

/* "קריאת שירות" — the panel's own heading, not the member's actions. */
.comos-sr-account__title {
	margin: 0;
	font-size: 28px;
	line-height: 36px;
	font-weight: 700;
}

/* The active domains, under the title — 16px was never set at all before
 * RC.2: the line inherited whatever the host theme's default paragraph size
 * happened to be. */
.comos-sr-account__domains {
	margin: 0;
	font-size: 16px;
	line-height: 24px;
	font-weight: 400;
	color: var(--csr-text-muted, #667085);
}

.comos-sr-account__count {
	margin: 0;
	font-size: 24px;
	line-height: 32px;
	font-weight: 700;
}

/* Marked by wording first — "ממתינה לתגובתך" — with colour only reinforcing
   it, so the distinction survives a greyscale screen. */
.comos-sr-account__action {
	margin: 0;
	color: var(--csr-state-waiting-text);
	font-weight: var(--csr-weight-medium);
}

/* --- the member's actions (buttons row) ---------------------------------- */
/*
 * Canonical class is __actions (RC.2, priority 4). This file named it
 * __actions from 0.14.0 onward in two separate places; the markup carried
 * __links until now, so neither definition ever matched a real element —
 * see includes/public/views/account.php.
 *
 * flex: 1 1 0 (not a fixed flex-basis like the earlier 14rem) is what makes
 * the two buttons equal width regardless of label length, with no min-width
 * difference between them. Height is fixed at 56px rather than a min-height,
 * so the row does not grow taller than the two buttons need. Below 430px —
 * the same breakpoint the acceptance criteria pin down explicitly so CSS and
 * test cannot disagree about whether 430px itself counts as mobile — the row
 * stacks and each button becomes 52px tall at 100% width.
 */
.comos-sr-account__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: stretch;
}

.comos-sr-account__actions .comos-sr__button {
	flex: 1 1 0;
	inline-size: auto;
	min-inline-size: 0;
	block-size: 56px;
	font-size: 18px;
	font-weight: 600;
	margin-block-end: 0;
	white-space: normal;
}

.comos-sr-account__actions .comos-sr__button:focus-visible {
	outline: 2px solid var(--csr-accent);
	outline-offset: 2px;
}

/* max-width:430px, not min-width:431px: 430px itself is mobile, matching the
 * acceptance criteria's explicit call on which side of the boundary owns the
 * shared pixel. */
@media (max-width: 430px) {
	.comos-sr-account__actions {
		flex-direction: column;
	}

	.comos-sr-account__actions .comos-sr__button {
		flex: 1 1 auto;
		inline-size: 100%;
		block-size: 52px;
	}
}

/* --- 0.8.0 · the member's actions ---------------------------------------- */

.comos-sr-done {
	background: var(--csr-state-accepted-bg);
	border-inline-start: 4px solid var(--csr-action);
	border-radius: var(--csr-radius);
	padding: var(--csr-space-3) var(--csr-space-4);
	margin-block-end: var(--csr-space-4);
}

/* .comos-sr__button--danger moved to tokens.css (scoped under .comos-sr for
   specificity; the bare rule here was beaten by theme selectors). */

/* Folded away until asked for. Cancelling is rare and irreversible, so it does
   not sit under the thumb beside "send message". */
.comos-sr-cancel {
	margin-block-start: var(--csr-space-4);
}

.comos-sr-cancel__open {
	display: flex;
	cursor: pointer;
	list-style: none;
	color: var(--csr-danger-text);
	border-color: var(--csr-danger-text);
}

.comos-sr-cancel__open::-webkit-details-marker {
	display: none;
}

/* --- rating -------------------------------------------------------------- */

.comos-sr-rate {
	border: 0;
	padding: 0;
	margin: 0 0 var(--csr-space-3);
}

.comos-sr-rate legend {
	font-size: var(--csr-size-base);
	font-weight: var(--csr-weight-medium);
	padding: 0;
}

.comos-sr-rate__opt {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--csr-space-1);
	min-inline-size: var(--csr-touch-min);
	min-block-size: var(--csr-touch-min);
	margin-inline-end: var(--csr-space-2);
	padding: var(--csr-space-2);
	border: 2px solid var(--csr-border-control);
	border-radius: var(--csr-radius);
	cursor: pointer;
}

/* :has() so the whole box shows the selection, with a fallback that still
   works without it — the radio itself is never hidden. */
.comos-sr-rate__opt:has(input:checked) {
	border-color: var(--csr-action);
	background: var(--csr-state-accepted-bg);
	font-weight: var(--csr-weight-bold);
}

.comos-sr-rating {
	font-size: 22px;
	letter-spacing: 2px;
	color: var(--csr-accent-line);
	margin-block: var(--csr-space-1);
}

/* Visible to a screen reader, and to nobody else. */
.comos-sr__sr {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* -------------------------------------------------------------------------
 * 1A.4 — the provider's queue.
 *
 * NOTHING HERE HIDES CONTENT. There is no `display:none` on anything that
 * carries information, and specifically none on the phone number: that value
 * is not in the markup at all until the server sends it, so there is nothing
 * for CSS to conceal. A stylesheet is the wrong place to enforce privacy —
 * it is one "view source" away from being no enforcement at all.
 * ---------------------------------------------------------------------- */

.comos-sr-queue,
.comos-sr-queue__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.comos-sr-queue__group {
	margin-block-start: var(--csr-space-6);
}

.comos-sr-queue__heading {
	display: flex;
	align-items: center;
	gap: var(--csr-space-2);
	margin: 0 0 var(--csr-space-2);
	font-size: var(--csr-size-base);
	font-weight: var(--csr-weight-bold);
	color: var(--csr-text-muted);
}

.comos-sr-queue__count {
	min-inline-size: 1.6em;
	padding: 0 var(--csr-space-2);
	border-radius: 999px;
	background: var(--csr-surface);
	text-align: center;
}

/* The overdue marker is a border and a badge, never a reordering: the clock
   lifts a card to the top of the list, and the card still says which group it
   belongs to. */
.comos-sr-card.is-overdue {
	border-inline-start: 4px solid var(--csr-danger-text);
}

.comos-sr-drag {
	color: var(--csr-text-muted);
	cursor: grab;
}

.comos-sr-card__controls {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: var(--csr-space-2);
	margin-block-start: var(--csr-space-3);
}

.comos-sr-inline {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--csr-space-2);
	margin: 0;
}

.comos-sr-inline__label {
	font-size: var(--csr-size-base);
	color: var(--csr-text-muted);
}

/* Every control stays at the touch target the rest of the plugin uses. The
   keyboard and touch route is the primary one on a phone, so it cannot be the
   route with the smaller buttons. */
.comos-sr-inline .comos-sr-btn,
.comos-sr-card__controls .comos-sr-btn {
	min-block-size: var(--csr-touch-min);
	min-inline-size: var(--csr-touch-min);
	margin: 0;
}

.comos-sr-alert {
	display: block;
	margin-block: var(--csr-space-3);
	padding: var(--csr-space-3);
	border-radius: var(--csr-radius);
	background: var(--csr-warning-bg);
	border-inline-start: 4px solid var(--csr-warning-line);
	color: var(--csr-warning-text);
	font-weight: var(--csr-weight-bold);
	text-decoration: none;
}

.comos-sr-message {
	padding: var(--csr-space-3);
	border-block-end: 1px solid var(--csr-border);
}

.comos-sr-message.is-internal {
	background: var(--csr-surface-info);
	border-inline-start: 4px solid var(--csr-accent-line);
}

.comos-sr-choice {
	margin-block: var(--csr-space-3);
	padding: var(--csr-space-3);
	border: 1px solid var(--csr-border-control);
	border-radius: var(--csr-radius);
}

.comos-sr-choice label {
	display: block;
	margin-block-start: var(--csr-space-2);
}

.comos-sr-confirm {
	margin-block: var(--csr-space-2);
	padding: var(--csr-space-2);
	background: var(--csr-warning-bg);
	border-radius: var(--csr-radius);
}

.comos-sr-action {
	margin-block-end: var(--csr-space-4);
	padding-block-end: var(--csr-space-4);
	border-block-end: 1px solid var(--csr-border);
}

.comos-sr-phone {
	font-size: var(--csr-size-title);
	font-weight: var(--csr-weight-bold);
}

.comos-sr-help--tight {
	margin-block: var(--csr-space-2) 0;
}

.comos-sr-status:empty {
	display: none;
}

/* Dragging is a shortcut over the buttons. When it is unavailable — no
   pointer, reduced motion, no script — the buttons are the whole feature and
   nothing is missing. */
@media (hover: none) {
	.comos-sr-drag {
		display: none;
	}
}

.comos-sr-card.is-dragging {
	opacity: .55;
}

.comos-sr-card.is-drop-target {
	outline: 2px dashed var(--csr-action);
	outline-offset: 2px;
}

/* -------------------------------------------------------------------------
 * 0.9.5 — the chosen service, stated in words.
 *
 * The radios come from a FILTERED list, so a choice can be off screen while
 * still being the choice. Colour alone could never say that, and this audience
 * includes people for whom a coloured border is not a signal at all.
 * ---------------------------------------------------------------------- */

.comos-sr-chosen {
	display: block;
	margin-block: var(--csr-space-3);
	padding: var(--csr-space-3);
	border-radius: var(--csr-radius);
	background: var(--csr-success-bg);
	border-inline-start: 4px solid var(--csr-success-accent);
	font-size: var(--csr-size-action);
	font-weight: var(--csr-weight-bold);
}

.comos-sr-chosen .comos-sr__help {
	display: block;
	font-weight: var(--csr-weight-regular);
}

/* -------------------------------------------------------------------------
 * 0.9.5 — the provider screen, rebuilt around state and one next step.
 * ---------------------------------------------------------------------- */

.comos-sr-notice--info {
	background: var(--csr-surface-info);
	border-inline-start: 4px solid var(--csr-accent-line);
	color: var(--csr-text);
}

/* State: icon + words + colour. Never colour alone — part of this community
   does not read a coloured edge as information at all. */
.comos-sr-state-banner {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--csr-space-2);
	margin-block-end: var(--csr-space-4);
	padding: var(--csr-space-4);
	border-radius: var(--csr-radius);
	background: var(--csr-surface);
	border-inline-start: 6px solid var(--csr-border-control);
}

.comos-sr-state-banner__text {
	font-size: var(--csr-size-title);
	font-weight: var(--csr-weight-bold);
}

.comos-sr-state-banner__handler {
	inline-size: 100%;
	font-size: var(--csr-size-action);
	color: var(--csr-text-muted);
}

.comos-sr-state-banner--progress { border-inline-start-color: var(--csr-action); }
.comos-sr-state-banner--waiting  { border-inline-start-color: var(--csr-warning-line); }
.comos-sr-state-banner--hold     { border-inline-start-color: var(--csr-warning-line); }
.comos-sr-state-banner--resolved,
.comos-sr-state-banner--closed   { border-inline-start-color: var(--csr-success-accent); }
.comos-sr-state-banner--rejected { border-inline-start-color: var(--csr-danger-text); }

/* What already happened: statements, not controls. A button for something
   done is a button that errors. */
.comos-sr-done {
	margin-block: var(--csr-space-3);
	padding: var(--csr-space-3);
	border-radius: var(--csr-radius);
	background: var(--csr-success-bg);
	list-style: none;
}

.comos-sr-done li {
	font-size: var(--csr-size-action);
	line-height: 1.9;
}

/* One primary action, and it looks like one. */
.comos-sr-btn--primary-lg {
	inline-size: 100%;
	min-block-size: 56px;
	font-size: var(--csr-size-action-lg);
	font-weight: var(--csr-weight-bold);
}

.comos-sr-more summary {
	cursor: pointer;
	padding: var(--csr-space-3) 0;
	font-size: var(--csr-size-action);
	color: var(--csr-action);
}

/* The reopen link on a closed request: present, not inviting. */
.comos-sr-reopen {
	display: inline-block;
	margin-block-start: var(--csr-space-4);
	font-size: var(--csr-size-base);
	color: var(--csr-text-muted);
}

/* -------------------------------------------------------------------------
 * 0.9.9 — the provider's history, and a standing line for what happened last.
 * ---------------------------------------------------------------------- */

/* The last action, inside the state banner. Not a notice: a notice is right
   to disappear on the next load, and this has to still be here tomorrow. */
.comos-sr-state-banner__last {
	inline-size: 100%;
	font-size: var(--csr-size-base);
	color: var(--csr-text-muted);
}

/* A missed target reads as one even in a list of ordinary events — the dot
   changes colour AND the row carries the words, never colour alone. */
.comos-sr-timeline li.is-alert {
	color: var(--csr-danger-text);
}

.comos-sr-timeline li.is-alert::before {
	background: var(--csr-danger-text);
}

/* The older entries, behind "show all": the same list, indented no further. */
.comos-sr-more .comos-sr-timeline {
	margin-block-start: var(--csr-space-3);
}

/* -------------------------------------------------------------------------
 * UI-1.1 — the icon component, and four weights of button.
 * ---------------------------------------------------------------------- */

/* Inherits its colour from the text beside it, which is what makes one set
   work on a green banner, a yellow chip and a red alert without variants. */
.comos-sr-icon {
	flex: 0 0 auto;
	vertical-align: -0.18em;
}

.comos-sr-state-banner__i {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 44px;
	block-size: 44px;
	border-radius: var(--csr-radius-pill);
	background: var(--csr-bg);
	box-shadow: var(--csr-shadow);
	flex: 0 0 auto;
}

.comos-sr-badge .comos-sr-icon {
	margin-inline-end: var(--csr-space-1);
}

/* --- Four weights, and the rule that makes them mean something ----------
 * ONE PRIMARY PER CARD. Seven identical green pills is what QA called
 * "overload": with no ranking the eye has to read all of them to find the one
 * that matters. Nothing was removed to fix it — everything was ranked.
 * ---------------------------------------------------------------------- */

.comos-sr-btn--primary {
	background: var(--csr-action);
	color: var(--csr-text-on-action);
	border: 1.5px solid transparent;
	border-radius: var(--csr-radius-pill);
	font-weight: var(--csr-weight-bold);
}

.comos-sr-btn--primary:hover,
.comos-sr-btn--primary:focus {
	background: var(--csr-action-hover);
}

.comos-sr-btn--secondary {
	background: var(--csr-bg);
	color: var(--csr-action);
	border: 1.5px solid var(--csr-action);
	border-radius: var(--csr-radius-pill);
	font-weight: var(--csr-weight-bold);
}

/* Navigation and rare actions. A link, because it is one. */
.comos-sr-btn--link {
	background: none;
	border: 0;
	padding: 0;
	min-block-size: auto;
	color: var(--csr-action);
	font-weight: var(--csr-weight-medium);
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* OUTLINE, NEVER A FILLED RED GROUND. White on #E5484D measures 3.91:1 and
   fails AA — the token file has said so since 1A.0. */
.comos-sr-btn--danger {
	background: var(--csr-bg);
	color: var(--csr-danger-text);
	border: 1.5px solid var(--csr-danger-text);
	border-radius: var(--csr-radius-pill);
	font-weight: var(--csr-weight-bold);
}

.comos-sr-btn--danger:hover,
.comos-sr-btn--danger:focus {
	background: var(--csr-danger-bg);
}

/* The rounder, softer surface the review asked for. Front end only. */
.comos-sr-card,
.comos-sr-state-banner,
.comos-sr-done,
.comos-sr-notice {
	border-radius: var(--csr-radius-lg);
}

.comos-sr-card {
	box-shadow: var(--csr-shadow);
}

.comos-sr-btn,
.comos-sr-btn--primary-lg {
	border-radius: var(--csr-radius-pill);
}

/* =========================================================================
 * UI-1.2 — the queue, rebuilt around two intents.
 * ====================================================================== */

/* --- THE BASE BUTTON, WHICH NEVER EXISTED -------------------------------
 * `.comos-sr-btn` had no rule of its own in this stylesheet. Every provider
 * button therefore rendered in whatever the active theme gives a <button>,
 * which is why UI-1.1's four weights did not appear on screen: a theme rule
 * like `.entry-content button` outranks a bare `.comos-sr-btn--secondary`.
 *
 * Scoped under `.comos-sr` — two classes — so it outranks ordinary theme
 * selectors without `!important`, and without reaching outside our own markup.
 * ---------------------------------------------------------------------- */
.comos-sr .comos-sr-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--csr-space-2);
	min-block-size: var(--csr-touch-min);
	padding: 0 var(--csr-space-5);
	border: 1.5px solid transparent;
	border-radius: var(--csr-radius-pill);
	background: var(--csr-surface);
	color: var(--csr-text);
	font-family: inherit;
	font-size: var(--csr-size-action);
	font-weight: var(--csr-weight-bold);
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .15s ease, border-color .15s ease;
}

.comos-sr .comos-sr-btn--primary {
	background: var(--csr-action);
	color: var(--csr-text-on-action);
	box-shadow: 0 6px 16px -8px rgba(0, 115, 45, .9);
}

.comos-sr .comos-sr-btn--primary:hover,
.comos-sr .comos-sr-btn--primary:focus {
	background: var(--csr-action-hover);
	color: var(--csr-text-on-action);
}

.comos-sr .comos-sr-btn--secondary {
	background: var(--csr-bg);
	color: var(--csr-action);
	border-color: var(--csr-action);
}

.comos-sr .comos-sr-btn--secondary:hover,
.comos-sr .comos-sr-btn--secondary:focus {
	background: var(--csr-surface-soft);
	color: var(--csr-action);
}

.comos-sr .comos-sr-btn--danger {
	background: var(--csr-bg);
	color: var(--csr-danger-text);
	border-color: var(--csr-danger-text);
}

.comos-sr .comos-sr-btn--ghost {
	background: var(--csr-bg);
	color: var(--csr-text);
	border-color: var(--csr-border-control);
	font-weight: var(--csr-weight-medium);
}

/* Square, for a single glyph. Pill radius on a square box gives a circle. */
.comos-sr .comos-sr-btn--icon {
	inline-size: var(--csr-touch-min);
	padding: 0;
	background: var(--csr-bg);
	border-color: var(--csr-border-control);
	font-size: 20px;
}

.comos-sr .comos-sr-btn--block {
	inline-size: 100%;
	min-block-size: var(--csr-touch-default);
	font-size: var(--csr-size-action-lg);
}

.comos-sr .comos-sr-btn--link,
.comos-sr a.comos-sr-btn--link {
	display: inline;
	min-block-size: 0;
	padding: 0;
	border: 0;
	background: none;
	color: var(--csr-action);
	font-weight: var(--csr-weight-medium);
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* --- Screen heading ---------------------------------------------------- */
.comos-sr-screen__title {
	margin-block: 0 var(--csr-space-5);
	font-size: var(--csr-size-display);
	font-weight: var(--csr-weight-bold);
	letter-spacing: -0.02em;
}

/* --- The mode switch --------------------------------------------------- */
.comos-sr-queue__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--csr-space-3);
	margin-block: var(--csr-space-4) var(--csr-space-5);
}

.comos-sr-queue__bar .comos-sr-help {
	flex: 1 1 16ch;
	margin: 0;
}

/* --- WORK MODE: a card with one action --------------------------------- */
.comos-sr-card--work {
	padding: var(--csr-space-5);
	background: var(--csr-bg);
	border: 1px solid var(--csr-border);
	border-radius: var(--csr-radius-lg);
	box-shadow: var(--csr-shadow);
	margin-block-end: var(--csr-space-4);
	list-style: none;
}

.comos-sr-card--work.is-overdue {
	border-inline-start: 6px solid var(--csr-danger-graphic);
}

.comos-sr-card--work .comos-sr-card__title {
	display: block;
	font-size: 21px;
	font-weight: var(--csr-weight-bold);
	line-height: 1.25;
	color: var(--csr-text);
	text-decoration: none;
}

.comos-sr-card--work .comos-sr-card__title:hover,
.comos-sr-card--work .comos-sr-card__title:focus {
	color: var(--csr-action);
	text-decoration: underline;
}

.comos-sr-card__sub {
	margin-block: var(--csr-space-1) var(--csr-space-3);
	font-size: var(--csr-size-min);
	color: var(--csr-text-muted);
}

.comos-sr-card__handler {
	margin-block: 0 var(--csr-space-4);
	font-size: var(--csr-size-action);
	color: var(--csr-text-muted);
}

.comos-sr-card__foot {
	margin-block: var(--csr-space-3) 0;
	text-align: center;
}

/* --- Chips: ground + words + mark, never colour alone ------------------ */
.comos-sr-chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--csr-space-2);
	margin-block: 0 var(--csr-space-3);
}

.comos-sr-chip {
	display: inline-flex;
	align-items: center;
	gap: var(--csr-space-1);
	padding: 6px 14px;
	border-radius: var(--csr-radius-pill);
	background: var(--csr-surface);
	color: var(--csr-text);
	font-size: var(--csr-size-min);
	font-weight: var(--csr-weight-medium);
}

.comos-sr-chip--new       { background: var(--csr-state-new-bg);      color: var(--csr-state-new-text); }
.comos-sr-chip--accepted  { background: var(--csr-state-accepted-bg); color: var(--csr-state-accepted-text); }
.comos-sr-chip--progress  { background: var(--csr-state-progress-bg); color: var(--csr-state-progress-text); }
.comos-sr-chip--waiting   { background: var(--csr-state-waiting-bg);  color: var(--csr-state-waiting-text); }
.comos-sr-chip--hold      { background: var(--csr-state-hold-bg);     color: var(--csr-state-hold-text); }
.comos-sr-chip--resolved  { background: var(--csr-state-resolved-bg); color: var(--csr-state-resolved-text); }
.comos-sr-chip--closed    { background: var(--csr-state-closed-bg);   color: var(--csr-state-closed-text); }
.comos-sr-chip--rejected  { background: var(--csr-state-rejected-bg); color: var(--csr-state-rejected-text); }

.comos-sr-chip--u-normal    { background: var(--csr-urgency-normal-bg);    color: var(--csr-urgency-normal-text); }
.comos-sr-chip--u-urgent    { background: var(--csr-urgency-urgent-bg);    color: var(--csr-urgency-urgent-text); }
.comos-sr-chip--u-emergency { background: var(--csr-urgency-emergency-bg); color: var(--csr-urgency-emergency-text); }

.comos-sr-chip--danger { background: var(--csr-danger-bg); color: var(--csr-danger-text); }

/* --- SORT MODE: short rows, and the whole queue on one screen ----------- */
.comos-sr-row {
	display: flex;
	align-items: center;
	gap: var(--csr-space-3);
	padding: var(--csr-space-3) var(--csr-space-4);
	background: var(--csr-bg);
	border: 1px solid var(--csr-border);
	border-radius: var(--csr-radius-lg);
	margin-block-end: var(--csr-space-2);
	list-style: none;
}

.comos-sr-row.is-overdue {
	border-inline-start: 6px solid var(--csr-danger-graphic);
}

.comos-sr-row__place {
	inline-size: 32px;
	block-size: 32px;
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--csr-radius-pill);
	background: var(--csr-surface);
	font-size: var(--csr-size-min);
	font-weight: var(--csr-weight-bold);
}

.comos-sr-row__body {
	flex: 1 1 12ch;
	min-inline-size: 0;
}

.comos-sr-row__title {
	display: block;
	font-size: var(--csr-size-action);
	font-weight: var(--csr-weight-bold);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.comos-sr-row__meta {
	display: inline-flex;
	align-items: center;
	gap: var(--csr-space-1);
	font-size: var(--csr-size-min);
	color: var(--csr-text-muted);
}

.comos-sr-row__controls {
	display: flex;
	align-items: center;
	gap: var(--csr-space-2);
	flex-wrap: wrap;
	justify-content: flex-end;
}

.comos-sr-row__controls .comos-sr-inline {
	display: flex;
	align-items: center;
	gap: var(--csr-space-1);
	margin: 0;
}

.comos-sr-row__controls select {
	min-block-size: var(--csr-touch-min);
	border-radius: var(--csr-radius-pill);
	border: 1.5px solid var(--csr-border-control);
	padding-inline: var(--csr-space-3);
	font-size: var(--csr-size-min);
	background: var(--csr-bg);
}

@media (max-width: 700px) {
	.comos-sr-row {
		flex-wrap: wrap;
	}

	.comos-sr-row__body {
		flex: 1 1 100%;
		order: -1;
	}
}

/* --- THE ONE UI-1.2 BROKE, AND THE REASON ------------------------------
 * `.comos-sr-btn--primary-lg` has existed since 0.9.5 as a single-class rule.
 * The scoped base rule added above outranks it, so the biggest action on the
 * request screen — "accept the call", "start work" — rendered in the base
 * surface grey and read as disabled. Scoping it restores it and puts it in the
 * same specificity band as everything else.
 * ---------------------------------------------------------------------- */
.comos-sr .comos-sr-btn--primary-lg {
	inline-size: 100%;
	min-block-size: var(--csr-touch-default);
	background: var(--csr-action);
	color: var(--csr-text-on-action);
	border-color: transparent;
	box-shadow: 0 6px 16px -8px rgba(0, 115, 45, .9);
	font-size: var(--csr-size-action-lg);
	font-weight: var(--csr-weight-bold);
}

.comos-sr .comos-sr-btn--primary-lg:hover,
.comos-sr .comos-sr-btn--primary-lg:focus {
	background: var(--csr-action-hover);
	color: var(--csr-text-on-action);
}

/* --------------------------------------------------------------------------
   Questions and answers — one section, both audiences
   --------------------------------------------------------------------------
   dev.5 rendered the question text in the timeline AND above the reply field,
   so the resident read every question twice. The timeline now records only that
   a question was sent; the words live here, once.
   -------------------------------------------------------------------------- */

.comos-sr-qa { margin: 0 0 16px; }
.comos-sr-qa__heading { margin: 0 0 8px; }

.comos-sr-qa__thread {
	margin: 0 0 10px;
	padding: 10px 12px;
	border: 1px solid var(--csr-border, #d6d9de);
	border-radius: 6px;
	background: var(--csr-surface-2, #f6f7f9);
}

.comos-sr-qa__item { margin: 0 0 8px; }
.comos-sr-qa__item--answer {
	padding-inline-start: 12px;
	border-inline-start: 3px solid var(--csr-border, #d6d9de);
}
.comos-sr-qa__meta { margin: 0; font-size: 0.85rem; opacity: 0.75; }
.comos-sr-qa__text { margin: 2px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.comos-sr-qa__pending { margin: 0; font-size: 0.85rem; opacity: 0.75; }

/* ==========================================================================
   0.14.0-dev.7 — wrapping and button consistency
   ==========================================================================
   CSS ONLY. No text and no behaviour changed here.
   ========================================================================== */

/* Headings and messages must break, not overflow.
 *
 * "לא ניתן להמשיך — יש לתקן את הדברים הבאים:" is long, contains an em dash and
 * is RTL. At a narrow width it ran past the card edge. `overflow-wrap` handles
 * ordinary words; `anywhere` is what breaks a single long token — a URL, a file
 * name, an unspaced string — which is the case a plain `break-word` still lets
 * overflow. `min-width: 0` is needed because these sit inside flex parents,
 * whose items default to `min-width: auto` and therefore refuse to shrink below
 * their content. Without it the other two properties never get the chance. */
.comos-sr-errors__title,
.comos-sr-errors li,
.comos-sr-similar__title,
.comos-sr-qa__text,
.comos-sr-qa__meta {
	min-width: 0;
	overflow-wrap: anywhere;
	word-break: normal;
	hyphens: auto;
}

.comos-sr-errors {
	max-width: 100%;
	box-sizing: border-box;
}

/* Buttons — one shape, three weights.
 *
 * Height, padding, radius and type come from the tokens so every button
 * matches; only colour distinguishes the three roles, which is what makes the
 * distinction readable rather than decorative.
 *
 * Full-width is right on a phone and wrong on a wide screen, where a button
 * stretched across the column stops reading as a control. The base keeps
 * `width: 100%` so nothing reflows on mobile, and the cap applies once there is
 * room. Logical properties throughout: nothing here assumes a direction. */
.comos-sr__button {
	box-sizing: border-box;
	border-radius: var(--csr-radius);
	font-family: inherit;
	font-size: var(--csr-size-action);
	line-height: var(--csr-line-height);
	min-height: var(--csr-touch-default);
	cursor: pointer;
	overflow-wrap: anywhere;
}

@media (min-width: 600px) {
	.comos-sr__button {
		width: auto;
		min-width: 12rem;
		max-width: 100%;
	}

	/* One exception: a button that is the page's single next step stays wide,
	 * because shrinking it would bury the action the screen exists for. */
	.comos-sr__button--primary.comos-sr-my__new,
	.comos-sr__button--block {
		width: 100%;
	}

	/* 1.3.0-dev.5-test.5: desktop has room for the count and the label on
	 * one line — back to a row, same gap token used elsewhere for inline
	 * badges. */
	.comos-sr-tab {
		flex-direction: row;
		gap: var(--csr-space-2);
	}

	/* 1.3.0-dev.5-test.6: the mobile-only visual reorder (badge painted
	 * before the label) is undone here — desktop keeps the original row
	 * order, label then badge, exactly as before this round. */
	.comos-sr-tab .comos-sr-widget__badge {
		order: 0;
	}
}

/* Keyboard users get the same information as pointer users. :focus-visible so a
 * mouse press does not leave a ring behind. */
.comos-sr__button:focus-visible,
.comos-sr-qa a:focus-visible {
	outline: 2px solid var(--csr-accent);
	outline-offset: 2px;
}

.comos-sr__button[disabled],
.comos-sr__button[aria-busy="true"] {
	cursor: not-allowed;
	opacity: 0.65;
}

/* ==========================================================================
   0.14.0-dev.9 — the account summary, and the archive row action
   ==========================================================================
   CSS only. No markup, no text, no behaviour changed.
   ========================================================================== */

/* [comos_sr_account] box model, typography and button row: consolidated into
 * ONE definition each, above (RC.2, priority 4) — this section used to repeat
 * .comos-sr-account, its title/count rules and .comos-sr-account__actions a
 * second time, with different values than the canonical block and no rule
 * for .comos-sr-account__domains at all. See the comment on the canonical
 * .comos-sr-account rule near the top of this file. */

/* The archive/restore icon (1.3.0-dev.5-test.4, item 4: the fixed SVG from
 * COMOS_SR_Presenter::archive_icon(), replacing the old 🗄 emoji). The old
 * .comos-sr-row-action rules were the archive form's OWN row spacing, from
 * when that form was a sibling element positioned after the card; the form
 * now renders inside .comos-sr-card__actions (see above), which already
 * provides its spacing, so .comos-sr-row-action no longer has any markup
 * to apply to and has been removed rather than left as dead CSS.
 *
 * flex-shrink: 0 keeps the icon from being squeezed narrower than its own
 * viewBox if the button's text wraps in a narrow row; no margin of its own
 * because the button's own `gap` (from .comos-sr__button's base rule)
 * already spaces the icon from the label — a margin here would double
 * that spacing, the emoji version needed it only to offset the emoji
 * glyph's own baseline whitespace, which an SVG does not have. */
.comos-sr-icon-archive {
	flex-shrink: 0;
}

/* Attach-files widget (1.1.0 dev.1, task #147) — functional layout only, no
 * visual polish, per the explicit "minimal only" scope for this round. */
.comos-sr-attachments__row {
	display: flex;
	align-items: center;
	gap: var(--csr-space-2);
}

.comos-sr-attachments__row .comos-sr__button {
	width: auto;
	min-width: 0;
	margin-block-end: 0;
}

/* Visually-hidden file input, 1.2.0 dev.2-test.4 — replaces the `hidden`
 * attribute this input used to carry. `hidden` maps to the UA's own
 * non-!important `[hidden] { display: none }`, which a WordPress theme's
 * own !important rules can and did beat on a real device (Eli's live
 * test: the file input became visible and the picker never opened at
 * all) — the same fight board.css's "NUCLEAR BUTTON RESET" and the
 * lightbox's own reset already document. This is the standard
 * "clip to 1px" technique instead: nothing here depends on `display` or
 * `visibility`, both properties a theme rule might still target, so
 * there is no toggle left for one to defeat. The input stays a real,
 * focusable, clickable element — label[for] (attachments-widget.php,
 * board.js) still opens its file picker on click exactly as intended. */
.comos-sr-attachments__file-input {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/* Hard rule, Eli's own exact wording: the retry button's `hidden`
 * attribute was losing the identical fight (theme !important vs. the
 * UA's non-!important `[hidden]`), so it was showing up before any
 * upload had even been attempted. */
[data-csr-attach-retry][hidden] {
	display: none !important;
}

/* Exact sizing, 1.2.0 dev.2-test.4 (Eli's own live test of test.3's
 * thumbnails: no dimensions had ever been specified precisely, and a name
 * could grow past its item or into its neighbour). One fixed-width "card"
 * per attachment, matching the Drawer's own layout (board.css,
 * .csr-drawer__attachment*) so a file looks identical whether it is shown
 * here (attachment-list.php's read-only view, or attachments-widget.php's
 * own pending list — both share these classes) or in the Drawer. */
.comos-sr-attachments__list {
	list-style: none;
	margin: var(--csr-space-2) 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.comos-sr-attachments__item {
	width: 112px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
}

.comos-sr-attachments__name {
	width: 112px;
	font-size: 13px !important;
	line-height: 18px !important;
	font-weight: 400 !important;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	/* Filenames are overwhelmingly Latin (extensions, generated names) —
	 * rendering them ltr keeps the name and its extension in the order a
	 * person actually typed or saved them, inside an RTL page. */
	direction: ltr;
	text-align: center;
}

.comos-sr-attachments__download {
	font-size: 12px;
	line-height: 18px;
}

.comos-sr-attachments__remove {
	font-size: 12px;
	line-height: 18px;
}

/* Read-only attachment list (partials/attachment-list.php) — image
 * thumbnail + lightbox trigger, 1.2.0 dev.2-test.2. Sizing/shape only —
 * the button-chrome reset (border, background, padding…) lives in the
 * shared !important block below, alongside the Drawer's own thumbnail
 * button and the lightbox's close button, since a WordPress theme's own
 * !important button styles reach all three the same way. */
.comos-sr-attachments__thumb-btn {
	display: block;
	line-height: 0;
	flex: 0 0 auto;
}

.comos-sr-attachments__thumb {
	width: 72px;
	height: 72px;
	object-fit: cover;
	border-radius: 5px;
	display: block;
}

/* ── Image lightbox (1.2.0 dev.2-test.2; z-index + button reset fixed in
 * test.3 after Eli's own live mobile+desktop test) ──────────────────────
 *
 * WHY THIS EXISTS: a thumbnail was a plain link to the download route,
 * which always sends `Content-Disposition: attachment` (a deliberate
 * hardening decision, left untouched here) — on iOS Safari, navigating to
 * that URL handed the image to the OS's own Quick Look, a full-screen
 * native viewer with no way back to the page. This modal replaces that
 * navigation: the same secured URL, loaded into an <img> exactly like the
 * thumbnail already does, fully inside our own close/Escape/backdrop
 * handling.
 *
 * WHY <dialog>, NOT A <div> OVERLAY (test.3): a plain overlay's z-index,
 * however high, can still lose to an arbitrary value elsewhere on the
 * page — which is exactly what happened here: it rendered BEHIND
 * #csr-drawer (board.css), whose z-index is 10,000,000 (itself set that
 * high to clear a WordPress theme's own menu chrome). <dialog> shown via
 * showModal() (attachments.js) is promoted to the browser's own
 * "top layer", which sits above every ordinary stacking context on the
 * page by definition — no z-index arms race required. The z-index on
 * .comos-sr-lightbox--fallback-open below exists ONLY for a browser with
 * no <dialog>/showModal support at all (no top layer to promote into);
 * attachments.js applies that class itself on that path. */
.comos-sr-lightbox {
	position: fixed;
	inset: 0;
	margin: 0;
	padding: var(--csr-space-3, 16px);
	max-width: none;
	max-height: none;
	width: 100%;
	height: 100%;
	border: none;
	background: rgba(20, 26, 33, 0.85);
	display: flex;
	align-items: center;
	justify-content: center;
}

.comos-sr-lightbox:not([open]) {
	display: none;
}

/* The native ::backdrop would otherwise stack its own dim layer beneath
 * this — .comos-sr-lightbox's own background above already does the
 * dimming, so the backdrop itself stays transparent. */
.comos-sr-lightbox::backdrop {
	background: transparent;
}

/* Fallback only (see comment above) — one higher than #csr-drawer's own
 * 10,000,000 (board.css), the only case a plain z-index number needs to
 * beat it at all. */
.comos-sr-lightbox--fallback-open {
	z-index: 10000001;
}

.comos-sr-lightbox__image {
	max-width: 100%;
	max-height: 90vh;
	object-fit: contain;
	display: block;
	margin: auto;
	border-radius: 4px;
}

/* ══════════════════════════════════════════════════════════════════════
   BUTTON RESET — lightbox close + thumbnail triggers (1.2.0 dev.2-test.3)
   ══════════════════════════════════════════════════════════════════════
   Same fight board.css's own "NUCLEAR BUTTON RESET" documents for the
   board's buttons: a WordPress theme (e.g. Solace) applies button styles
   with !important — green backgrounds, pill radius, extra padding,
   drop-shadows — that a specificity battle alone cannot beat. That reset
   is scoped to #csr-board-root; these three buttons are NOT inside it
   (the lightbox lives on document.body; the read-only attachment list's
   thumbnail button lives on the plain ticket pages), so they need the
   same treatment scoped by CLASS instead. Every property is listed
   explicitly (no shorthand); each class is then re-declared below with
   only the appearance it actually wants, also !important, so a later
   theme rule of equal specificity cannot win the tie. Nothing but these
   three classes is touched. */
.comos-sr-lightbox__close,
.comos-sr-attachments__thumb-btn,
.csr-drawer__attachment-thumb-btn {
	-webkit-appearance: none        !important;
	appearance:         none        !important;
	background:         transparent !important;
	background-image:   none        !important;
	background-color:   transparent !important;
	color:              inherit     !important;
	border:             none        !important;
	border-radius:      0           !important;
	padding:            0           !important;
	margin:             0           !important;
	box-shadow:         none        !important;
	text-shadow:        none        !important;
	text-transform:     none        !important;
	letter-spacing:     normal      !important;
	filter:             none        !important;
	line-height:        inherit     !important;
	cursor:             pointer     !important;
	vertical-align:     baseline    !important;
}

.comos-sr-attachments__thumb-btn,
.csr-drawer__attachment-thumb-btn {
	display:       block            !important;
	border:        1px solid #dde3ea !important;
	border-radius: 6px              !important;
}

.comos-sr-attachments__thumb-btn:focus-visible,
.csr-drawer__attachment-thumb-btn:focus-visible,
.comos-sr-lightbox__close:focus-visible {
	outline: 2px solid var(--csr-color-focus, #1a3a5c);
	outline-offset: 2px;
}

.comos-sr-lightbox__close {
	position:        absolute      !important;
	inset-block-start: 10px        !important;
	inset-inline-end:  10px        !important;
	inline-size:       44px        !important;
	block-size:        44px        !important;
	border-radius:     50%         !important;
	background:        #fff       !important;
	color:              #1a1a1a   !important;
	font-size:          24px;
	line-height:        1          !important;
	display:            flex       !important;
	align-items:        center     !important;
	justify-content:    center     !important;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4) !important;
}

/* Scroll lock while the lightbox is open — set on <html>, not <body>, so
 * it cannot be undone by anything that resets body's own styles. */
html.comos-sr-lightbox-open {
	overflow: hidden;
}

/* Summary screen — attachment icon + filenames (1.1.0 dev.3). Functional
 * only, matching the attach widget's own minimal styling above. */
.comos-sr-summary__attach-icon {
	margin-inline-end: 0.35em;
}

.comos-sr-summary__attach-list {
	list-style: disc;
	margin: var(--csr-space-1) 0 0;
	padding-inline-start: 1.2em;
}

/* =========================================================================
 * 0.14.0-dev.12 — the closing feedback card.
 * ====================================================================== */

/* THE OVERLAP, AND WHY IT HAPPENED.
 *
 * "הבעיה חזרה? פתיחה מחדש של הפנייה" is an inline-block with a top margin and
 * no bottom margin; the feedback card that follows is a .comos-sr-card, which
 * has a bottom margin and no top margin. Neither side contributed anything to
 * the space between them, so the two ran together. There is nothing for margin
 * collapsing to collapse when both values are zero.
 *
 * Fixed on the reopen link rather than on .comos-sr-card, because that class is
 * used on nine screens and the gap is only wrong here. */
.comos-sr-reopen {
	margin-block-end: var(--csr-space-4);
}

/* A tighter card for the one question. Scoped to the form — .comos-sr-card
 * alone would restyle the summary, the wizard and the closed-request panels
 * too, and none of them asked for it. This selector matches only the feedback
 * form, which is the sole element carrying both classes. */
.comos-sr-form.comos-sr-card {
	padding: var(--csr-space-3);
}

.comos-sr-form.comos-sr-card .comos-sr-rate {
	margin-block-end: var(--csr-space-2);
}

/* THE RATING BUTTONS STAY 48px. --csr-touch-min is the touch-target floor and
 * the radio is deliberately never hidden, so the row cannot be made narrower
 * than five reachable controls. What was actually wasteful was the padding on
 * top of that floor and the spacing between them, and that is what is reduced —
 * the buttons get smaller in the ways that do not cost anyone a missed tap. */
.comos-sr-rate__opt {
	padding: var(--csr-space-1);
	margin-inline-end: var(--csr-space-1);
	margin-block-start: var(--csr-space-2);
}

/* The comment box asks for less room before it is used. rows="2" is the floor;
 * this only stops it claiming more width than the card. */
.comos-sr-form.comos-sr-card textarea {
	max-inline-size: 100%;
}

/* =========================================================================
 * 0.14.0-dev.17 — the feedback scale, and the account panel.
 * ====================================================================== */

/* THE SCALE IS WORDS NOW, so the options are no longer five identical squares
 * and cannot be sized like them. Each keeps the 48px touch floor in both axes —
 * --csr-touch-min is not negotiable — and grows in width to fit its word.
 *
 * flex-wrap on the fieldset, so five words break onto a second line on a narrow
 * screen instead of overflowing the card. */
.comos-sr-rate {
	display: flex;
	flex-wrap: wrap;
	gap: var(--csr-space-2);
}

/* The legend and the help line are flex items too; without this they would sit
 * in the row beside the options. */
.comos-sr-rate legend,
.comos-sr-rate > .comos-sr__help {
	flex: 1 1 100%;
}

.comos-sr-rate__opt {
	min-block-size: var(--csr-touch-min);
	inline-size: auto;
	flex: 0 1 auto;
}

.comos-sr-rate__word {
	font-size: var(--csr-size-base);
	line-height: 1.2;
}

/* Selection is shown by border weight and background TOGETHER with the radio
 * dot, which is never hidden. Three signals, none of them colour alone. */
.comos-sr-rate__opt:focus-within {
	outline: 2px solid var(--csr-accent);
	outline-offset: 2px;
}

/* -------------------------------------------------------------------------
 * [comos_sr_account] — and the host theme.
 *
 * The panel is dropped into somebody else's page, and a theme that sets
 * `max-width` or `text-align` on descendants of its content area reaches
 * straight into it. The box model itself (box-sizing, inline-size,
 * max-inline-size, text-align) is set once, in the canonical
 * .comos-sr-account rule near the top of this file — this section keeps only
 * what that rule does not already cover: descendants also need box-sizing
 * pinned, or a theme's own reset can still reach a child even though the
 * panel itself is protected.
 * ---------------------------------------------------------------------- */
.comos-sr-account *,
.comos-sr-account *::before,
.comos-sr-account *::after {
	box-sizing: border-box;
}