/*
 * The week ahead, and the form that adds to it.
 *
 * Every colour here is a theme token with a light fallback behind it, so the
 * block sits inside the site's own palette and follows it into dark mode
 * without a second set of rules. The plugin's other shortcode prints its CSS
 * inline; this one is a file, because it is long enough that inlining it would
 * ship the whole thing again on every render.
 */

/*
 * The rail, stated once.
 *
 * The width of the date bubble and the space after it set where every line in
 * this block begins: the dotted thread runs down the middle of the first track,
 * the event names start after the second, and the heading above them sits on
 * the same two. Written as numbers in four places they drift the first time one
 * of them changes, so they are written here and read from there.
 */
.cec-tl {
	--cec-rail: 56px;
	--cec-rail-gap: 14px;

	/* How far into an event card its text begins: the card's padding and the
	   hairline around it. The heading above the list is indented by the same. */
	--cec-card-pad: 14px;
	--cec-card-inset: calc(var(--cec-card-pad) + 1px);

	direction: rtl;
	text-align: right;
	font-size: 14px;
	color: var(--mena-text, #1a1a1a);
}

/*
 * The list, and the form that adds to it, side by side.
 *
 * The form is the second column, which in a right-to-left page is the left one,
 * and it sticks: somebody filling it in is looking at the list to check the
 * date is not already there, and a form that scrolls away is a form they have
 * to scroll back to. The list is first in the markup so source order still
 * reads list-then-form, which is what a screen reader and the stacked layout
 * below both follow.
 */
.cec-tl--split {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 330px);
	gap: 0 24px;
	align-items: start;
}

/* Across the top of both, so the list and the form start at the same height —
   the panel's first line lands level with the first event rather than with the
   title above it. */
.cec-tl--split > .cec-tl__head { grid-column: 1 / -1; }

.cec-tl__main { min-width: 0; }

.cec-tl__side {
	position: sticky;
	top: 20px;
	min-width: 0;
}

@media (max-width: 860px) {
	.cec-tl--split { grid-template-columns: minmax(0, 1fr); }
	.cec-tl__side { position: static; }
}

/* ------------------------------------------------------------------ head */

/*
 * The block's heading.
 *
 * A mark and the name, with room under both. A line of text on its own is a
 * line that happens to be first; a glyph in a tinted square sitting over the
 * rail is a heading, and it tells a reader arriving mid-page where one block
 * ends and this one begins. The space does the separating — a rule as well was
 * one divider too many above a list already threaded on its own line.
 */
.cec-tl__head {
	margin-bottom: 20px;
	padding-bottom: 14px;
}

/*
 * Laid out on the same two tracks an event row uses.
 *
 * A flex row would put the glyph hard against the block's edge and the name a
 * gap after it — neither landing anywhere in particular. On the rail's own
 * grid the glyph sits centred over the column of date bubbles beneath it and
 * the name begins exactly where the event names begin, so the heading reads as
 * the top of this list rather than as a line that happens to precede it.
 */
.cec-tl__title {
	display: grid;
	grid-template-columns: var(--cec-rail) minmax(0, 1fr);
	/* The rail's own gap, plus the inset of the card the event names sit in —
	   the heading lines up with the words below it, not with the boxes. */
	gap: calc(var(--cec-rail-gap) + var(--cec-card-inset));
	align-items: center;
	margin: 0;
	font-size: 19px;
	font-weight: 600;
	line-height: 1.3;
}

.cec-tl__ico {
	justify-self: center;
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 10px;
	background: color-mix(in srgb, var(--mena-rose, #f5365c) 12%, var(--mena-elevated, #fff));
	color: var(--mena-rose, #f5365c);
}

.cec-tl__ico svg {
	width: 19px;
	height: 19px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.cec-tl__sub {
	margin: 4px 0 0;
	font-size: 12.5px;
	color: var(--mena-muted, #8898aa);
}

.cec-tl__said {
	margin: 0 0 14px;
	padding: 11px 14px;
	border-radius: 11px;
	border-inline-start: 3px solid var(--mena-green, #17bf63);
	background: color-mix(in srgb, var(--mena-green, #17bf63) 10%, transparent);
	font-size: 13.5px;
	line-height: 1.7;
}

.cec-tl__said--bad {
	border-inline-start-color: var(--mena-rose, #f5365c);
	background: color-mix(in srgb, var(--mena-rose, #f5365c) 12%, transparent);
}

.cec-tl__empty {
	margin: 0;
	padding: 28px 16px;
	border: 1px dashed var(--mena-border, #e6e6ec);
	border-radius: 14px;
	text-align: center;
	color: var(--mena-muted, #8898aa);
	font-size: 13.5px;
}

/* ------------------------------------------------------------- the rail */

/*
 * A dotted line with a bubble on it for each event.
 *
 * The line is drawn on the list rather than as a border per row, so it runs
 * unbroken between the bubbles — a border on each leaves a seam at every join,
 * which reads as a stack of cards rather than one thread through time. Dotted
 * rather than solid because the gaps between these events are days and weeks,
 * not a continuous scale, and a solid line claims a precision the list has not
 * got.
 *
 * It stops short of both ends: a line running past the first and last bubbles
 * implies events above and below that are not there.
 */
.cec-tl__list {
	position: relative;
	display: grid;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cec-tl__list::before {
	content: "";
	position: absolute;
	inset-block: calc(var(--cec-rail) / 2);
	inset-inline-start: calc(var(--cec-rail) / 2 - 1px);
	width: 0;
	border-inline-start: 2px dotted var(--mena-border, #e6e6ec);
}

/* An event: its bubble, then what it is. */
.cec-tl__day {
	position: relative;
	display: grid;
	grid-template-columns: var(--cec-rail) minmax(0, 1fr);
	gap: var(--cec-rail-gap);
	align-items: start;
}

/*
 * The date, as a bubble on the line.
 *
 * Round rather than a rounded rectangle, because it is a point on a thread and
 * a point is a circle. The pink is the calendar card's own — same tint, same
 * border weight as [event_widget]'s badge — so a reader who has seen one
 * recognises the other. The ring around it is the page's own background rather
 * than a colour, which is what lets the dotted line pass behind without
 * touching it.
 */
.cec-tl__when {
	position: relative;
	z-index: 1;
	display: grid;
	justify-items: center;
	align-content: center;
	width: var(--cec-rail);
	height: var(--cec-rail);
	box-sizing: border-box;
	border-radius: 50%;
	background: color-mix(in srgb, var(--mena-rose, #f5365c) 12%, var(--mena-elevated, #fff));
	border: 1px solid color-mix(in srgb, var(--mena-rose, #f5365c) 26%, transparent);
	color: var(--mena-rose, #f5365c);
	box-shadow: 0 0 0 4px var(--mena-elevated, #fff);
}

.cec-tl__dnum {
	display: block;
	font-size: 17px;
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: -.02em;
	font-variant-numeric: tabular-nums;
}

.cec-tl__dmon {
	display: block;
	margin-top: 2px;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	opacity: .85;
}

/*
 * Today.
 *
 * The one row anybody is looking for, so it is the one row that is not like the
 * others: the bubble fills and takes a soft halo, the card is tinted and picks
 * up an edge in the same pink, and a small pill says the word. Three signals
 * rather than one, because a single change of shade is the first thing lost to
 * a dim screen or a colour-blind reader.
 */
.cec-tl__day.is-today .cec-tl__when {
	background: var(--mena-rose, #f5365c);
	border-color: var(--mena-rose, #f5365c);
	color: #fff;
	box-shadow: 0 0 0 4px var(--mena-elevated, #fff),
				0 0 0 8px color-mix(in srgb, var(--mena-rose, #f5365c) 18%, transparent);
}

.cec-tl__day.is-today .cec-tl__item {
	border-color: color-mix(in srgb, var(--mena-rose, #f5365c) 32%, transparent);
	background: color-mix(in srgb, var(--mena-rose, #f5365c) 6%, var(--mena-elevated, #fff));
	border-inline-start: 3px solid var(--mena-rose, #f5365c);
}

.cec-tl__day.is-today .cec-tl__name::after {
	content: "اليوم";
	display: inline-block;
	margin-inline-start: 7px;
	padding: 1px 7px;
	border-radius: 999px;
	background: var(--mena-rose, #f5365c);
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	vertical-align: middle;
}

/* ---------------------------------------------------------------- items */

.cec-tl__items { display: grid; gap: 8px; min-width: 0; }

.cec-tl__item {
	padding: 12px var(--cec-card-pad);
	border: 1px solid var(--mena-border, #e6e6ec);
	border-radius: 12px;
	background: var(--mena-elevated, #fff);
}

.cec-tl__name {
	margin: 0;
	font-size: 14.5px;
	font-weight: 600;
	line-height: 1.7;
}

/* The year the thing happened. Latin digits in an Arabic line, so it is
   isolated — otherwise the brackets end up on the wrong sides. */
.cec-tl__year {
	direction: ltr;
	unicode-bidi: isolate;
	font-size: 12px;
	font-weight: 600;
	color: var(--mena-muted, #8898aa);
}

.cec-tl__text {
	margin-top: 5px;
	font-size: 13px;
	line-height: 1.9;
	color: var(--mena-text-2, #3f4650);
}

.cec-tl__text p { margin: 0 0 6px; }
.cec-tl__text p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------- the form */

/*
 * The panel, for somebody who is not signed in.
 *
 * It stands where the form would, so a grey sentence in a dashed box left the
 * whole right-hand column looking like something that had failed to load — to
 * exactly the readers who have never seen it work. It is the same card the form
 * sits in, saying what the space is for and what they get from it, with the one
 * control that gets them there.
 */
.cec-gate {
	display: grid;
	justify-items: center;
	gap: 10px;
	padding: 22px 18px;
	border: 1px solid var(--mena-border, #e6e6ec);
	border-radius: 14px;
	background: var(--mena-surface, #f7f7f9);
	text-align: center;
}

.cec-gate__ico {
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: color-mix(in srgb, var(--mena-rose, #f5365c) 12%, var(--mena-elevated, #fff));
	border: 1px solid color-mix(in srgb, var(--mena-rose, #f5365c) 24%, transparent);
	color: var(--mena-rose, #f5365c);
}

.cec-gate__ico svg {
	width: 22px;
	height: 22px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.cec-gate__t {
	margin: 2px 0 0;
	font-size: 15px;
	font-weight: 800;
	color: var(--mena-text, #1a1a1a);
}

.cec-gate__p {
	margin: 0;
	font-size: 12.5px;
	line-height: 1.85;
	color: var(--mena-text-2, #3f4650);
}

/*
 * The one way out of this panel, so it takes the whole of it.
 *
 * `text-decoration` is restated here at a weight the site's own `a { … }` rules
 * cannot outrank: this is an anchor drawn as a button, and the theme's link
 * underline runs straight through the middle of the word otherwise.
 */
.cec-tl a.cec-gate__go,
.cec-gate__go {
	width: 100%;
	margin-top: 4px;
	text-decoration: none;
}

.cec-tl a.cec-gate__go:hover,
.cec-tl a.cec-gate__go:focus { text-decoration: none; }

.cec-gate__note {
	margin: 0;
	padding-top: 10px;
	border-top: 1px dashed var(--mena-border, #e6e6ec);
	width: 100%;
	font-size: 11px;
	line-height: 1.7;
	color: var(--mena-muted, #8898aa);
}

.cec-add {
	padding: 16px;
	border: 1px solid var(--mena-border, #e6e6ec);
	border-radius: 14px;
	background: var(--mena-surface, #f7f7f9);
}

/*
 * The panel's heading, marked the way the block's own heading is.
 *
 * A pencil rather than a calendar: the one above says what this is, this one
 * says what you can do to it. Same tinted square, scaled down to the panel —
 * it is a section inside the block, not a second block.
 */
.cec-add__title {
	display: flex;
	align-items: center;
	gap: 9px;
	margin: 0 0 18px;
	font-size: 15px;
	font-weight: 400;
}

.cec-add__ico {
	flex: none;
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	border-radius: 9px;
	background: color-mix(in srgb, var(--mena-rose, #f5365c) 12%, var(--mena-elevated, #fff));
	color: var(--mena-rose, #f5365c);
}

.cec-add__ico svg {
	width: 15px;
	height: 15px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* One column: the panel is 330px, and two fields abreast in that is two fields
   nobody can read the labels of. */
.cec-add__form { display: grid; gap: 12px; }

.cec-f { display: grid; gap: 5px; min-width: 0; align-content: start; }
.cec-f--wide { grid-column: 1 / -1; }

.cec-f > span {
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .02em;
	color: var(--mena-muted, #8898aa);
}

.cec-req { font-style: normal; color: var(--mena-rose, #f5365c); }

/*
 * A floor rather than a height, and real padding.
 *
 * These carry Arabic, and a box with a fixed height and a fixed line box crops
 * whatever font turns out to be loaded — descenders first, because Arabic faces
 * carry far more below the baseline than Latin ones.
 */
.cec-tl input[type="text"],
.cec-tl input[type="date"],
.cec-tl textarea {
	width: 100%;
	box-sizing: border-box;
	height: auto;
	min-height: 42px;
	padding: 8px 11px;
	font: inherit;
	font-size: 13.5px;
	line-height: 1.95;
	color: var(--mena-text, #1a1a1a);
	background: var(--mena-control-bg, #fff);
	border: 1px solid var(--mena-control-border, #cfd4dd);
	border-radius: 9px;
	outline: none;
}

/*
 * A textarea is as wide as the boxes above it.
 *
 * Stated on the element as well as in the group above, because a textarea's
 * intrinsic width comes from its `cols` attribute — twenty characters — and any
 * theme rule that resets `width` on textareas hands it back to that. `display:
 * block` for the same reason: inline-block leaves it sitting on a text baseline
 * with a few pixels of descender space beneath.
 */
.cec-tl textarea[data-cec-details],
.cec-tl textarea {
	display: block;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
	resize: vertical;
	line-height: 1.8;
	/*
	 * And it reads like the boxes above it.
	 *
	 * The theme centres textarea text — which is a reasonable thing to do to a
	 * comment box and quite wrong here: the detail line sat centred under two
	 * right-aligned fields, so the panel had two different ideas about which
	 * edge text starts at. `start` rather than `right`, so it follows the
	 * language rather than the page.
	 */
	text-align: start;
	padding: 8px 11px;
	font-size: 13.5px;
	color: var(--mena-text, #1a1a1a);
	border-radius: 9px;
}

/*
 * The one !important in this file, and what it is for.
 *
 * The theme carries `textarea { width: calc(100% - 40px) !important }` — a
 * width that assumes content-box and twenty pixels of padding on each side, and
 * which loads after this file. That is the forty-pixel inset: the detail box
 * sat narrower than the two fields above it no matter what was written here,
 * because nothing without !important can outrank an !important.
 *
 * So it is answered in kind, and only on the one property that needs it. The
 * radius and the padding are restated with it because the same rule sets both
 * — a 20px pill under two 9px boxes was the other half of not fitting.
 */
.cec-tl .cec-add textarea,
.cec-tl .cec-f textarea,
.cec-tl textarea {
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
	border-radius: 9px !important;
	padding: 8px 11px !important;
	line-height: 1.8 !important;
}

.cec-tl input::placeholder,
.cec-tl textarea::placeholder {
	color: var(--mena-faint, #c1c7d2);
	font-size: 12px;
	opacity: 1;
}

.cec-tl input:focus,
.cec-tl textarea:focus {
	border-color: var(--mena-gold, #ffd014);
	box-shadow: 0 0 0 3px rgba(255, 208, 20, .22);
}

/* --------------------------------------------------------- the two ticks */

.cec-opts {
	gap: 8px;
	padding: 10px 11px;
	border: 1px solid var(--mena-border, #e6e6ec);
	border-radius: 12px;
	background: var(--mena-surface, #f7f7f9);
}

/*
 * A drawn box rather than the browser's.
 *
 * The theme sets `input[type=checkbox] { position: relative; width: 20px }` at
 * a weight this cannot beat from a class, so the control is taken out of the
 * layout entirely and a span is drawn in its place. The input keeps every bit
 * of its behaviour — it is still what a click on the label toggles, still what
 * the keyboard reaches, still what posts.
 */
.cec-check {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	cursor: pointer;
}

.cec-check input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

.cec-check__box {
	flex: none;
	display: grid;
	place-items: center;
	width: 19px;
	height: 19px;
	margin-top: 2px;
	border: 1.5px solid var(--mena-control-border, #cfd4dd);
	border-radius: 6px;
	background: var(--mena-control-bg, #fff);
	transition: background .15s ease, border-color .15s ease;
}

.cec-check__box svg {
	width: 12px;
	height: 12px;
	fill: none;
	stroke: #1a1a1a;
	stroke-width: 2.6;
	stroke-linecap: round;
	stroke-linejoin: round;
	opacity: 0;
	transform: scale(.6);
	transition: opacity .12s ease, transform .18s cubic-bezier(.22, 1, .36, 1);
}

.cec-check input:checked + .cec-check__box {
	background: var(--mena-gold, #ffd014);
	border-color: var(--mena-gold, #ffd014);
}

.cec-check input:checked + .cec-check__box svg { opacity: 1; transform: none; }

.cec-check input:focus-visible + .cec-check__box {
	outline: 2px solid var(--mena-gold, #ffd014);
	outline-offset: 2px;
}

.cec-check__text {
	font-size: 13px;
	font-weight: 600;
	line-height: 1.6;
}

/*
 * The line under each tick.
 *
 * It is an <em> for the sake of the markup — a note about the thing above it —
 * and not for the sake of the type: italics on an Arabic face are a synthetic
 * slant the font has no design for, and the example it carries is a bracketed
 * Latin year that comes out leaning the wrong way against the text around it.
 * Upright, a size down, and quiet.
 */
.cec-check__text em {
	display: block;
	margin-top: 1px;
	font-style: normal !important;
	font-size: 10.5px;
	font-weight: 500;
	line-height: 1.55;
	color: var(--mena-muted, #8898aa);
}

/* The second tick only means anything once the first is on, so it arrives
   rather than sitting there greyed out. */
.cec-opts [hidden] { display: none; }

@media (prefers-reduced-motion: no-preference) {
	.cec-opts label:not([hidden]) { animation: cec-in .22s cubic-bezier(.22, 1, .36, 1) both; }
}

@keyframes cec-in {
	from { opacity: 0; transform: translateY(-4px); }
	to   { opacity: 1; transform: none; }
}

/* The panel has one action, so it takes the width of the panel — a small
   button at one end of a column this narrow reads as a secondary control. */
.cec-add__foot { display: grid; }

.cec-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	height: 42px;
	padding: 0 22px;
	text-decoration: none;
	border: 1px solid var(--mena-control-border, #cfd4dd);
	border-radius: 999px;
	background: var(--mena-control-bg, #fff);
	color: var(--mena-text, #1a1a1a);
	font: inherit;
	font-size: 13.5px;
	font-weight: 700;
	cursor: pointer;
	transition: transform .12s ease;
}

.cec-btn:active { transform: translateY(1px); }

/*
 * Working.
 *
 * The ring is in the button and always in the markup — it has no width until
 * the form is busy, so the label sits where it sat and does not jump sideways
 * when the ring appears. The button is disabled for the same reason a spinner
 * is shown at all: the answer is not back yet, and a second press would send
 * the entry twice.
 */
.cec-btn__spin {
	flex: none;
	width: 0;
	height: 15px;
	margin-inline-end: 0;
	border-radius: 50%;
	border: 2px solid currentColor;
	border-top-color: transparent;
	opacity: 0;
	transition: width .16s ease, margin .16s ease, opacity .16s ease;
}

.cec-add__form.is-busy .cec-btn__spin {
	width: 15px;
	margin-inline-end: 9px;
	opacity: .85;
	animation: cec-spin .7s linear infinite;
}

.cec-btn[disabled] { cursor: progress; opacity: .85; }
.cec-btn[disabled]:active { transform: none; }

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

@media (prefers-reduced-motion: reduce) {
	.cec-add__form.is-busy .cec-btn__spin { animation-duration: 2.4s; }
}

.cec-btn--go {
	background: var(--mena-gold, #ffd014);
	border-color: var(--mena-gold, #ffd014);
	color: #1a1a1a;
}

/* ---------------------------------------------------------- the preview */

/*
 * What the entry will look like once it is live.
 *
 * The same markup the list above uses, so this is not an impression of the
 * result — it is the result, drawn from what has been typed so far. Which is
 * the only version of a preview worth having: one built out of its own markup
 * drifts from the real thing the first time either changes.
 */
.cec-prev {
	/* The panel's rail, narrower than the list's — set here so the row below
	   picks it up rather than restating the number a second time. */
	--cec-rail: 36px;
	--cec-rail-gap: 10px;

	padding: 12px;
	border: 1px dashed var(--mena-border, #e6e6ec);
	border-radius: 12px;
	background: var(--mena-elevated, #fff);
}

/* Nothing typed yet: the title stands in for itself, and says so by being
   faint rather than by being absent — an empty card reads as a broken one. */
.cec-prev__ghost { color: var(--mena-faint, #c1c7d2); font-weight: 500; }

/*
 * Inside the panel, the entry is drawn plainly.
 *
 * The list gives today's card a tint and a coloured edge, which is right there
 * and wrong here: the dashed box around the whole preview already says "this is
 * not on the page yet", and a second border inside it was a stray bar down one
 * side of a card that has no reason to be marked out — everything in this panel
 * is the same one entry.
 *
 * Written against .is-today as well, because that is the rule it has to beat:
 * .cec-tl__day.is-today .cec-tl__item is three classes deep and a two-class
 * reset loses to it.
 */
.cec-prev .cec-tl__item,
.cec-prev .cec-tl__day.is-today .cec-tl__item {
	padding: 10px 12px;
	border: 0;
	border-radius: 10px;
	background: var(--mena-surface, #f7f7f9);
}

/*
 * A smaller bubble in the panel.
 *
 * The list's is fifty-six pixels because it is a marker on a thread with room
 * around it; here it is one item in a narrow column, and at that size it took a
 * fifth of the width and shouted louder than the entry it belongs to. Thirty-six
 * across, with the type stepped down to match — a scaled bubble with full-size
 * numerals in it is a bubble with no margins.
 */
/* Its size comes from `--cec-rail` above; only the ring is different, because
   the panel is tighter than the page and four pixels of it read as a gap. */
.cec-prev .cec-tl__when { box-shadow: 0 0 0 3px var(--mena-elevated, #fff); }

.cec-prev .cec-tl__dnum { font-size: 13px; line-height: 1; }
.cec-prev .cec-tl__dmon { margin-top: 1px; font-size: 7.5px; letter-spacing: .06em; }

/* Inherited from the panel above; restated only because `.cec-tl__day` is where
   the tracks are declared and this is where they are read. */
.cec-prev .cec-tl__day { grid-template-columns: var(--cec-rail) minmax(0, 1fr); gap: var(--cec-rail-gap); }

/*
 * Two things on one day.
 *
 * They share the bubble — the date is the marker on the thread, and drawing it
 * twice for the 19th reads as two separate days that happen to carry the same
 * number. The events stack beside it.
 */
.cec-tl__items { display: grid; gap: 8px; min-width: 0; }

/* Only the first card in a day gets the "today" pill: repeating it on every
   event under one bubble says the same thing three times. */
.cec-tl__day.is-today .cec-tl__item ~ .cec-tl__item .cec-tl__name::after { content: none; }

/*
 * The character count on the detail line.
 *
 * Sits in the label, at the far end of it, where it is out of the way until it
 * is wanted — and turns when the room is nearly gone, because a cap that only
 * announces itself by the key going dead reads as a broken field.
 */
/*
 * The label, with room at the far end for a counter.
 *
 * space-between would have done it if the label were one thing — but it is a
 * word and a required asterisk, and space-between pushed those to opposite ends
 * of the field. The counter is what gets the auto margin; everything before it
 * stays where it was.
 */
.cec-f > span {
	display: flex;
	align-items: baseline;
	gap: 4px;
}

.cec-f > span .cec-count { margin-inline-start: auto; }

.cec-count {
	font-style: normal;
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0;
	color: var(--mena-faint, #c1c7d2);
	direction: ltr;
	unicode-bidi: isolate;
	transition: color .15s ease;
}

.cec-count.is-full { color: var(--mena-rose, #f5365c); }

/* --------------------------------------------------------------- toasts */

/*
 * What happened, said once and then gone.
 *
 * The block used to answer by reloading the page with the message printed above
 * the list, which meant the reader lost their place to be told a sentence. A
 * toast says the same sentence without taking the page away, and takes itself
 * away after.
 *
 * Fixed to the bottom of the viewport rather than to the panel: the panel is a
 * sticky column and the form can be anywhere on screen when the answer arrives,
 * so a message anchored to it is a message that appears wherever the reader
 * happens not to be looking. `pointer-events` is off on the shelf and back on
 * for each toast, so the strip does not sit over the page swallowing clicks.
 */
.cec-toasts {
	position: fixed;
	z-index: 99999;
	inset-inline-start: 20px;
	bottom: 20px;
	display: grid;
	gap: 8px;
	justify-items: start;
	max-width: min(360px, calc(100vw - 40px));
	direction: rtl;
	pointer-events: none;
}

.cec-toast {
	display: flex;
	align-items: center;
	gap: 10px;
	box-sizing: border-box;
	max-width: 100%;
	padding: 11px 14px;
	border: 1px solid var(--mena-border, #e6e6ec);
	border-radius: 12px;
	background: var(--mena-elevated, #fff);
	box-shadow: 0 10px 30px rgba(16, 20, 30, .14);
	color: var(--mena-text, #1a1a1a);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.6;
	text-align: right;
	cursor: pointer;
	pointer-events: auto;

	/* Where it comes in from, and where it goes back to. `is-in` is added a
	   frame after insertion, which is what gives the transition somewhere to
	   start; without that frame the toast is simply already there. */
	opacity: 0;
	transform: translateY(10px);
	transition: opacity .22s ease, transform .22s ease;
}

.cec-toast.is-in { opacity: 1; transform: none; }

/* The mark. An SVG path rather than two rotated boxes: a tick made of angled
   bars is a tick that mirrors in a right-to-left page. */
.cec-toast__ico {
	flex: none;
	display: grid;
	place-items: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
}

.cec-toast__ico svg {
	width: 13px;
	height: 13px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.4;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.cec-toast--ok .cec-toast__ico {
	background: color-mix(in srgb, var(--mena-green, #17bf63) 15%, var(--mena-elevated, #fff));
	color: var(--mena-green, #17bf63);
}

.cec-toast--bad .cec-toast__ico {
	background: color-mix(in srgb, var(--mena-rose, #f5365c) 15%, var(--mena-elevated, #fff));
	color: var(--mena-rose, #f5365c);
}

/* A coloured edge as well as a coloured mark, so the two are told apart with
   the colour taken away. */
.cec-toast--ok { border-inline-start: 3px solid var(--mena-green, #17bf63); }
.cec-toast--bad { border-inline-start: 3px solid var(--mena-rose, #f5365c); }

@media (prefers-reduced-motion: reduce) {
	.cec-toast { transition-duration: .01ms; transform: none; }
}

/* ============================ the form behind a button, on a phone */

/*
 * Above the breakpoint the form is the column beside the list: always there,
 * always visible, and this button would be offering to reveal something the
 * reader is already looking at.
 */
.cec-tl__add { display: none; }

@media (max-width: 860px) {
	/*
	 * The heading becomes a row: the title takes what it needs and the button
	 * sits at the far end — the left corner, in a right-to-left page.
	 */
	.cec-tl__head {
		display: flex;
		align-items: center;
		gap: 12px;
	}

	.cec-tl__title { flex: 1 1 auto; min-width: 0; }

	/*
	 * The panel opens where the button is, not at the far end of the list.
	 *
	 * In source order the list comes first and the form second — which is what
	 * puts the form in the left column on a wide screen, and what a screen
	 * reader should hear. Stacked and behind a button that reasoning stops
	 * holding: pressing "أضف حدثاً" unfolded a form a whole timeline below the
	 * control that opened it, so the page appeared not to have responded.
	 * Reordering the grid items moves the box without moving the markup, so the
	 * two-column layout and the reading order both stay as they were.
	 */
	.cec-tl--split > .cec-tl__head { order: 1; }
	.cec-tl--split > .cec-tl__side { order: 2; }
	.cec-tl--split > .cec-tl__main { order: 3; }

	.cec-tl__add {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		flex: none;
		padding: 8px 13px 8px 11px;
		border: 1px solid color-mix(in srgb, var(--mena-rose, #f5365c) 30%, transparent);
		border-radius: 999px;
		background: color-mix(in srgb, var(--mena-rose, #f5365c) 10%, transparent);
		color: var(--mena-rose, #f5365c);
		font-family: inherit;
		font-size: 13px;
		font-weight: 600;
		line-height: 1;
		cursor: pointer;
		touch-action: manipulation;
		-webkit-tap-highlight-color: transparent;
		transition: background .18s ease, color .18s ease, border-color .18s ease;
	}

	.cec-tl__add:hover,
	.cec-tl__add:focus-visible {
		background: color-mix(in srgb, var(--mena-rose, #f5365c) 18%, transparent);
	}

	.cec-tl__add-ico {
		display: grid;
		place-items: center;
		width: 15px;
		height: 15px;
		transition: transform .28s cubic-bezier(.22, 1, .36, 1);
	}

	.cec-tl__add-ico svg {
		width: 100%;
		height: 100%;
		fill: none;
		stroke: currentColor;
		stroke-width: 2.1;
		stroke-linecap: round;
	}

	/* The plus turns into a cross rather than being swapped for one, so the
	   control reads as the same object in two states. */
	.cec-tl.is-adding .cec-tl__add-ico { transform: rotate(45deg); }

	.cec-tl__add-shut { display: none; }
	.cec-tl.is-adding .cec-tl__add-open { display: none; }
	.cec-tl.is-adding .cec-tl__add-shut { display: inline; }

	/*
	 * The panel itself.
	 *
	 * Collapsed with grid rows rather than a max-height, because a max-height
	 * needs a number bigger than the panel will ever be — and a number that is
	 * wrong in one direction clips the form, in the other makes the close ease
	 * out through empty space. 0fr to 1fr measures the content itself and is
	 * exact at both ends.
	 *
	 * Where that cannot be animated the two states still hold: the panel is
	 * shut at 0fr and open at 1fr, it simply arrives without the tween.
	 *
	 * visibility, not opacity alone: shut, the form's fields must be out of the
	 * tab order rather than merely invisible, and it is held until the fade has
	 * finished on the way out.
	 */
	.cec-tl--split > .cec-tl__side {
		display: grid;
		grid-template-rows: 0fr;
		opacity: 0;
		visibility: hidden;
		transition:
			grid-template-rows .34s cubic-bezier(.22, 1, .36, 1),
			opacity .2s ease,
			visibility 0s linear .34s;
	}

	.cec-tl--split > .cec-tl__side > .cec-tl__sheet {
		min-height: 0;
		overflow: hidden;
	}

	.cec-tl.is-adding > .cec-tl__side {
		grid-template-rows: 1fr;
		opacity: 1;
		visibility: visible;
		transition-delay: 0s;
	}

	/*
	 * Room below the panel, and only while it is open — the heading's own
	 * bottom margin is the gap above it, and collapsed, a margin either side
	 * would leave a band of nothing between the button and the first event.
	 */
	.cec-tl.is-adding > .cec-tl__side .cec-tl__sheet > * { margin-bottom: 20px; }

	/*
	 * With no script the panel is simply the section it always was. The button
	 * cannot work, so the stylesheet does not let it hide anything.
	 */
	html:not(.cec-js) .cec-tl__add { display: none; }

	html:not(.cec-js) .cec-tl--split > .cec-tl__side {
		grid-template-rows: 1fr;
		opacity: 1;
		visibility: visible;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cec-tl__add-ico,
	.cec-tl--split > .cec-tl__side { transition: none; }
}