/* TIPN Training Rota — scoped under .tipn-rota.
 *
 * v1.2 (2026-09-07, presentation pass): rebuilt onto design tokens taken from
 * TIPN_BRAND_RULES.md so the app reads as part of the TIPN site rather than a
 * bolt-on. Brand teal #0ca096 measures 3.2:1 on white, so it carries GRAPHICS
 * only (rules, borders, the today ring); --teal-text #0a8074 (4.8:1) carries
 * small text and sits behind white text. Buttons are pills and cards are square
 * per the brand. Every spacing value comes off the 4px scale; there is one
 * corner radius for cards and one for pills.
 *
 * Nothing here changes a rule: same model, same endpoints, same controls.
 */

/* ---------------------------------------------------------------- tokens -- */
.tipn-rota {
	--teal:            #0ca096;
	--teal-text:       #0a8074;
	--teal-deep:       #004843;
	--teal-wash:       #e8f6f4;
	--teal-tint:       #f3faf9;
	--lime:            #c5e686;

	--surface:         #ffffff;
	--surface-sunk:    #f8f8f8;
	--line:            #e2eae9;   /* hairlines and container edges: decorative */
	--line-strong:     #c3d5d3;   /* panel and card edges: decorative */
	/* The visible boundary of a CONTROL has to reach 3:1 against what it sits on
	   (WCAG 1.4.11), so buttons, the slot control and form inputs use this rather
	   than --line-strong, which measures 1.5:1. */
	--line-input:      #6f8a86;
	--ink:             #004843;
	--ink-muted:       #5d6b69;
	--ink-quiet:       #45605c;

	--ok-bg:           #edf7ee;
	--ok-line:         #7fb488;
	--ok-ink:          #235c2c;
	--warn-bg:         #fdf6e7;
	--warn-line:       #e8c877;
	--warn-ink:        #6f5410;
	--danger-bg:       #fdf0ef;
	--danger-line:     #dd5a4b;
	--danger-ink:      #8a2f28;
	--weekend-bg:      #f1f4f5;
	--weekend-line:    #dde4e6;

	--s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
	--s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;

	--t-page:    clamp(26px, 3.4vw, 36px);
	--t-section: 24px;
	--t-sub:     19px;
	--t-body:    17px;
	--t-small:   15px;
	--t-micro:   13px;

	--r-pill: 999px;
	--r-card: 2px;

	--tap-min:       44px;
	--tap-min-dense: 36px;

	--app-max:  1120px;
	--form-max: 620px;
	--read-max: 68ch;

	--speed: 120ms;
}

/* ------------------------------------------------------------------ base -- */
.tipn-rota {
	max-width: var(--app-max);
	margin-inline: auto;
	font-size: var(--t-body);
	line-height: 1.5;
	color: var(--ink);
	background: var(--surface);
}
.tipn-rota *,
.tipn-rota *::before,
.tipn-rota *::after { box-sizing: border-box; }

.tipn-rota .tipn-muted { color: var(--ink-muted); }

.tipn-rota .tipn-sr {
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0; border: 0;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	overflow: hidden;
	white-space: nowrap;
}

/* ------------------------------------------------------- app bar + tabs --- */
.tipn-rota .tipn-appbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--s-3);
	padding: var(--s-3) var(--s-4);
	background: var(--teal-deep);
	color: #fff;
}
.tipn-rota .tipn-appbar__mark {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: var(--t-body);
	font-weight: 700;
	letter-spacing: 0.03em;
	color: #fff;
}
.tipn-rota .tipn-appbar__glyph {
	flex: none;
	display: block;
	width: 22px;
	height: 22px;
	border-radius: var(--r-card);
	background: var(--lime);
}
.tipn-rota .tipn-appbar__who {
	margin: 0;
	font-size: var(--t-small);
	color: #cfe6e3;
}
.tipn-rota .tipn-appbar__who a { color: #fff; text-decoration: underline; }
.tipn-rota .tipn-appbar__who a:hover { color: var(--lime); }

.tipn-rota .tipn-tabs {
	display: flex;
	gap: var(--s-1);
	padding: 0 var(--s-4);
	border-bottom: 1px solid var(--line);
	background: var(--surface);
}
.tipn-rota .tipn-tabs a {
	padding: var(--s-3);
	font-size: var(--t-small);
	font-weight: 700;
	color: var(--ink-muted);
	text-decoration: none;
	border-bottom: 3px solid transparent;
	margin-bottom: -1px;
	transition: color var(--speed) ease, border-color var(--speed) ease;
}
.tipn-rota .tipn-tabs a:hover { color: var(--teal-deep); border-bottom-color: var(--line-strong); }
.tipn-rota .tipn-tabs a[aria-current] { color: var(--teal-deep); border-bottom-color: var(--teal); }
.tipn-rota .tipn-tabs a:focus-visible { outline: 3px solid var(--teal-text); outline-offset: -3px; }

/* ------------------------------------------------------------- page body -- */
.tipn-rota .tipn-rota-body { padding: var(--s-5) var(--s-4) var(--s-6); }

/* Brand teal, matching every other h1 on the site. Enfold sets this from
   `#top #wrap_all .all_colors h1` (specificity 2,1,1), which no class-only rule here can
   beat, so the value is declared to match rather than fought with !important — the app
   follows the site if the site ever changes. At 26px and up this is large text, where
   3.24:1 on white is enough; the brand teal is never used for body-sized text. */
.tipn-rota .tipn-rota-welcome {
	margin: 0 0 var(--s-2);
	max-width: 26ch;
	font-size: var(--t-page);
	line-height: 1.2;
	font-weight: 700;
	color: var(--teal);
	text-align: left;
}
.tipn-rota .tipn-rota-title {
	margin: 0 0 var(--s-3);
	font-size: var(--t-section);
	line-height: 1.25;
	color: var(--teal-deep);
}
.tipn-rota .tipn-rota-intro p {
	margin: 0 0 var(--s-5);
	max-width: var(--read-max);
}

/* --------------------------------------------------------------- footer --- */
.tipn-rota .tipn-rota-foot {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--s-3);
	padding: var(--s-3) var(--s-4);
	border-top: 1px solid var(--line);
	font-size: var(--t-micro);
	color: var(--ink-muted);
}
.tipn-rota .tipn-rota-foot a { color: var(--teal-text); }

/* ------------------------------------------------------------- the gate --- */
.tipn-rota--gate { padding: var(--s-5) var(--s-4); }
.tipn-rota--gate p { margin: 0; }
.tipn-rota--gate a { color: var(--teal-text); }

/* -------------------------------------------------------------- buttons --- */
.tipn-rota .tipn-btn {
	display: inline-block;
	font-family: inherit;
	font-size: var(--t-small);
	font-weight: 700;
	line-height: 1.2;
	min-height: var(--tap-min);
	padding: 10px 20px;
	border: 2px solid var(--line-input);
	border-radius: var(--r-pill);
	background: var(--surface);
	color: var(--teal-deep);
	cursor: pointer;
	transition: background-color var(--speed) ease, border-color var(--speed) ease, color var(--speed) ease;
}
.tipn-rota .tipn-btn:hover { border-color: var(--teal); color: var(--teal-text); }
.tipn-rota .tipn-btn:focus-visible { outline: 3px solid var(--teal-text); outline-offset: 2px; }
.tipn-rota .tipn-btn[disabled] { opacity: 0.45; cursor: default; }
.tipn-rota .tipn-btn--primary {
	background: var(--teal-text);
	border-color: var(--teal-text);
	color: #fff;
}
.tipn-rota .tipn-btn--primary:hover {
	background: var(--teal-deep);
	border-color: var(--teal-deep);
	color: #fff;
}
.tipn-rota .tipn-btn--danger { border-color: var(--danger-line); color: var(--danger-ink); }
.tipn-rota .tipn-btn--danger:hover { background: var(--danger-bg); border-color: var(--danger-line); color: var(--danger-ink); }
.tipn-rota .tipn-btn--quiet { border-color: transparent; color: var(--ink-muted); padding: 10px 14px; }
.tipn-rota .tipn-btn--quiet:hover { background: var(--surface-sunk); border-color: transparent; color: var(--teal-deep); }
/* Smaller type and tighter sides, but never a smaller target: every button outside a
   calendar cell keeps the full 44px. */
.tipn-rota .tipn-btn--small { min-height: var(--tap-min); padding: 8px 16px; font-size: var(--t-micro); }
.tipn-rota .tipn-btn--busy { opacity: 0.6; cursor: wait; }

/* ---------------------------------------------------- messages + confirm -- */
.tipn-rota .tipn-msg {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--s-3);
	margin: 0 0 var(--s-4);
	padding: var(--s-3) var(--s-4);
	border-radius: var(--r-card);
	font-size: var(--t-small);
	font-weight: 600;
}
.tipn-rota .tipn-msg > span { flex: 1 1 16ch; }
.tipn-rota .tipn-msg--error {
	background: var(--danger-bg);
	border: 1px solid var(--danger-line);
	color: var(--danger-ink);
}
.tipn-rota .tipn-msg--ok {
	background: var(--ok-bg);
	border: 1px solid var(--ok-line);
	color: var(--ok-ink);
}
.tipn-rota .tipn-rota-error {
	margin: 0 0 var(--s-4);
	background: var(--danger-bg);
	border: 1px solid var(--danger-line);
	color: var(--danger-ink);
	border-radius: var(--r-card);
	padding: var(--s-3) var(--s-4);
}
.tipn-rota .tipn-rota-error p { margin: 0; }
.tipn-rota .tipn-error-actions { margin-top: var(--s-3); }
.tipn-rota .tipn-confirm {
	margin-top: var(--s-3);
	padding: var(--s-3) var(--s-4);
	border: 1px solid var(--danger-line);
	background: var(--danger-bg);
	border-radius: var(--r-card);
	font-size: var(--t-small);
	color: var(--danger-ink);
}
.tipn-rota .tipn-confirm:focus-visible { outline: 3px solid var(--danger-ink); outline-offset: 2px; }
.tipn-rota .tipn-confirm p { margin: 0; }
.tipn-rota .tipn-confirm-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-3); }

/* ------------------------------------------------------------- skeleton --- */
.tipn-rota .tipn-skeleton { padding-top: var(--s-2); }
.tipn-rota .tipn-skeleton-grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: var(--s-1);
}
.tipn-rota .tipn-skeleton-cell {
	min-height: 86px;
	border: 1px solid var(--line);
	border-radius: var(--r-card);
	background: var(--surface-sunk);
	animation: tipn-pulse 1400ms ease-in-out infinite;
}
.tipn-rota .tipn-skeleton-cell:nth-child(3n) { animation-delay: 200ms; }
.tipn-rota .tipn-skeleton-cell:nth-child(4n) { animation-delay: 400ms; }
@keyframes tipn-pulse {
	0%, 100% { opacity: 1; }
	50%      { opacity: 0.55; }
}

/* ------------------------------------------------------- month summary --- */
.tipn-rota .tipn-summary {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-5);
	margin: 0 0 var(--s-4);
	padding: var(--s-3) var(--s-4);
	border: 1px solid var(--line);
	border-radius: var(--r-card);
	background: var(--teal-tint);
}
.tipn-rota .tipn-stat { line-height: 1.25; }
.tipn-rota .tipn-stat b {
	display: block;
	font-size: 22px;
	color: var(--teal-deep);
}
.tipn-rota .tipn-stat span {
	font-size: var(--t-micro);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--ink-muted);
}

/* ------------------------------------------------------------- calendar --- */
.tipn-rota .tipn-cal { margin-bottom: var(--s-5); }
.tipn-rota .tipn-cal-nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--s-3);
	margin-bottom: var(--s-3);
}
.tipn-rota .tipn-cal-title {
	font-size: var(--t-section);
	font-weight: 700;
	color: var(--teal-deep);
}
.tipn-rota .tipn-cal-controls { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.tipn-rota .tipn-cal-week,
.tipn-rota .tipn-cal-grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: var(--s-1);
}
.tipn-rota .tipn-cal-head { margin-bottom: var(--s-1); }
.tipn-rota .tipn-cal-dayname {
	text-align: center;
	font-size: var(--t-micro);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--ink-muted);
	padding-bottom: var(--s-1);
}
.tipn-rota .tipn-cal-cell {
	min-width: 0; /* lets 1fr grid columns shrink below content width on phones */
	min-height: 86px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r-card);
	padding: 6px;
	transition: background-color var(--speed) ease, border-color var(--speed) ease;
}
.tipn-rota .tipn-cal-cell--pad { background: transparent; border-color: transparent; }
/* Weekend + bank-holiday colouring (visual only, days stay usable). Defined before
   the state modifiers below so muted/today/selected/avail still win. */
.tipn-rota .tipn-cal-cell--weekend { background: var(--weekend-bg); border-color: var(--weekend-line); }
.tipn-rota .tipn-cal-cell--bankhol { background: var(--warn-bg); border-color: var(--warn-line); }
.tipn-rota .tipn-cal-cell--bankhol .tipn-cal-date { color: var(--warn-ink); }
.tipn-rota .tipn-cal-cell--muted { background: var(--surface); border-color: #f0f4f3; }
.tipn-rota .tipn-cal-cell--muted .tipn-cal-date { color: #93a2a0; }
.tipn-rota .tipn-cal-cell--today { box-shadow: inset 0 0 0 2px var(--teal); }
.tipn-rota .tipn-cal-cell--click { cursor: pointer; }
.tipn-rota .tipn-cal-cell--click:hover { background: var(--teal-tint); }
.tipn-rota .tipn-cal-cell--click:focus-visible { outline: 3px solid var(--teal-text); outline-offset: 1px; }
.tipn-rota .tipn-cal-cell--avail { background: var(--teal-wash); border-color: var(--teal); }
.tipn-rota .tipn-cal-cell--selected {
	background: var(--teal-wash);
	border-color: var(--teal-deep);
	box-shadow: inset 0 0 0 1px var(--teal-deep);
}
.tipn-rota .tipn-cal-date {
	display: block;
	font-weight: 700;
	font-size: var(--t-small);
	margin-bottom: var(--s-1);
}

/* Trainer slot control: AM / PM / All as one joined control per day (v1.2).
   Same three actions and the same meaning as before; one object, not three. */
.tipn-rota .tipn-seg {
	display: flex;
	border: 1px solid var(--line-input);
	border-radius: var(--r-pill);
	overflow: hidden;
	background: var(--surface);
}
.tipn-rota .tipn-seg__btn {
	flex: 1 1 0;
	min-width: 0;
	min-height: var(--tap-min-dense);
	padding: 6px 2px;
	font-family: inherit;
	font-size: var(--t-micro);
	font-weight: 700;
	line-height: 1;
	border: 0;
	border-right: 1px solid var(--line-input);
	background: transparent;
	color: var(--ink-quiet);
	cursor: pointer;
	transition: background-color var(--speed) ease, color var(--speed) ease;
}
.tipn-rota .tipn-seg__btn:last-child { border-right: 0; }
.tipn-rota .tipn-seg__btn:hover { background: #eef4f3; color: var(--teal-deep); }
.tipn-rota .tipn-seg__btn:focus-visible { outline: 3px solid var(--teal-text); outline-offset: -3px; }
.tipn-rota .tipn-seg__btn--on { background: var(--teal-text); color: #fff; }
.tipn-rota .tipn-seg__btn--on:hover { background: var(--teal-deep); color: #fff; }
.tipn-rota .tipn-seg--busy { opacity: 0.55; }
.tipn-rota .tipn-seg__btn[disabled] { cursor: wait; }
/* One day saves at a time. The others go quiet rather than silently swallowing a
   tap, which is what happened once the whole-grid dim was removed. */
.tipn-rota .tipn-seg--pending { opacity: 0.7; }
.tipn-rota .tipn-seg--pending .tipn-seg__btn { cursor: wait; }
.tipn-rota .tipn-seg--pending .tipn-seg__btn:hover { background: transparent; color: var(--ink-quiet); }
.tipn-rota .tipn-seg--pending .tipn-seg__btn--on:hover { background: var(--teal-text); color: #fff; }

.tipn-rota .tipn-legend {
	margin: 0 0 var(--s-3);
	font-size: var(--t-small);
	color: var(--ink-muted);
}
.tipn-rota .tipn-avail-count {
	margin: 0 0 var(--s-5);
	font-size: var(--t-body);
	font-weight: 600;
	color: var(--ink);
}

/* Admin month cell content */
.tipn-rota .tipn-avail-badge {
	display: inline-block;
	font-size: var(--t-micro);
	font-weight: 700;
	color: var(--teal-deep);
	background: var(--surface);
	border: 1px solid var(--teal);
	border-radius: var(--r-pill);
	padding: 1px 8px;
	margin-bottom: var(--s-1);
}
.tipn-rota .tipn-booking-chip {
	font-size: var(--t-micro);
	line-height: 1.25;
	background: var(--teal-deep);
	color: #fff;
	border-radius: var(--r-card);
	padding: 3px 6px;
	margin-top: 3px;
	overflow: hidden;
}
.tipn-rota .tipn-booking-chip__time { display: block; font-weight: 700; }
/* Time on its own line, then up to two lines of title. v1.1 ran both together on one
   line and cut it off mid word, which made the calendar's most-read text unreadable. */
.tipn-rota .tipn-booking-chip__title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	overflow-wrap: anywhere;
}
.tipn-rota .tipn-booking-chip--cancelled {
	background: var(--surface-sunk);
	color: var(--ink-muted);
	text-decoration: line-through;
}

/* ------------------------------------------------------------ day panel --- */
.tipn-rota .tipn-day-panel {
	border: 1px solid var(--line-strong);
	border-radius: var(--r-card);
	background: var(--surface);
	scroll-margin-top: var(--s-4);
}
.tipn-rota .tipn-day-panel__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--s-3);
	padding: var(--s-4);
	border-bottom: 1px solid var(--line);
}
.tipn-rota .tipn-day-panel__head h2 {
	margin: 0;
	font-size: var(--t-section);
	color: var(--teal-deep);
}
.tipn-rota .tipn-day-panel__sub { font-size: var(--t-small); color: var(--ink-muted); }
.tipn-rota .tipn-day-panel__back {
	font-size: var(--t-small);
	font-weight: 700;
	color: var(--teal-text);
	background: none;
	border: 0;
	padding: 4px 0;
	cursor: pointer;
	font-family: inherit;
	text-decoration: underline;
}
.tipn-rota .tipn-day-panel__back:focus-visible { outline: 3px solid var(--teal-text); outline-offset: 2px; }
.tipn-rota .tipn-day-panel__body { padding: var(--s-4); }
.tipn-rota .tipn-day-loading { margin: 0; padding: var(--s-4); color: var(--ink-muted); }

.tipn-rota .tipn-section-title {
	margin: var(--s-5) 0 var(--s-3);
	font-size: var(--t-sub);
	color: var(--teal-deep);
}

/* ------------------------------------------------------------ empty state - */
.tipn-rota .tipn-empty {
	border: 1px dashed var(--line-strong);
	border-radius: var(--r-card);
	padding: var(--s-5) var(--s-4);
	text-align: center;
	color: var(--ink-muted);
	font-size: var(--t-small);
}
.tipn-rota .tipn-empty__title {
	display: block;
	margin-bottom: var(--s-1);
	font-size: var(--t-body);
	font-weight: 700;
	color: var(--ink);
}
.tipn-rota .tipn-empty p { margin: 0; }
.tipn-rota .tipn-empty .tipn-btn { margin-top: var(--s-3); }

/* ----------------------------------------------------------- booking card - */
.tipn-rota .tipn-card {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r-card);
	padding: var(--s-4);
	margin: var(--s-3) 0;
}
.tipn-rota .tipn-card--cancelled { background: var(--surface-sunk); }
.tipn-rota .tipn-card--editing { border: 2px solid var(--teal); }
.tipn-rota .tipn-card-title {
	font-weight: 700;
	font-size: var(--t-sub);
	color: var(--teal-deep);
}
.tipn-rota .tipn-card-sub { font-weight: 700; }
.tipn-rota .tipn-card-rows {
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: 2px var(--s-3);
	margin: var(--s-3) 0 0;
	font-size: var(--t-small);
}
.tipn-rota .tipn-card-rows dt { color: var(--ink-muted); }
.tipn-rota .tipn-card-rows dd { margin: 0; }
.tipn-rota .tipn-card-notes {
	margin: var(--s-3) 0 0;
	padding-top: var(--s-3);
	border-top: 1px dashed var(--line);
	font-size: var(--t-small);
	white-space: pre-line;
}
.tipn-rota .tipn-badge-cancelled {
	display: inline-block;
	background: var(--danger-ink);
	color: #fff;
	font-size: var(--t-micro);
	font-weight: 700;
	border-radius: var(--r-pill);
	padding: 2px 10px;
}
.tipn-rota .tipn-card a { color: var(--teal-text); }
.tipn-rota .tipn-card-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-4); }

/* ------------------------------------------------------------- toolbars --- */
.tipn-rota .tipn-toolbar {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--s-2);
}
.tipn-rota .tipn-toolbar-note { font-size: var(--t-micro); color: var(--ink-muted); }

/* ---------------------------------------------------------------- forms --- */
.tipn-rota .tipn-form { max-width: var(--form-max); }
.tipn-rota .tipn-form h3 {
	margin: 0 0 var(--s-4);
	font-size: var(--t-sub);
	color: var(--teal-deep);
}
.tipn-rota .tipn-fieldset { border: 0; padding: 0; margin: 0 0 var(--s-5); }
.tipn-rota .tipn-legend-group {
	padding: 0;
	margin-bottom: var(--s-3);
	font-size: var(--t-micro);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ink-muted);
}
.tipn-rota .tipn-field { display: block; margin-bottom: var(--s-3); }
.tipn-rota .tipn-field-label {
	display: block;
	font-size: var(--t-small);
	font-weight: 700;
	color: var(--teal-deep);
	margin-bottom: var(--s-1);
}
.tipn-rota .tipn-field-req { color: var(--danger-ink); }
.tipn-rota .tipn-field-opt { font-weight: 400; color: var(--ink-muted); }
.tipn-rota .tipn-form input,
.tipn-rota .tipn-form textarea {
	width: 100%;
	font-size: var(--t-body);
	font-family: inherit;
	color: var(--ink);
	padding: 10px 12px;
	border: 1px solid var(--line-input);
	border-radius: var(--r-card);
	background: var(--surface);
}
.tipn-rota .tipn-form input:focus,
.tipn-rota .tipn-form textarea:focus { outline: 3px solid var(--teal-text); outline-offset: 0; }
.tipn-rota .tipn-form .tipn-input--mid { max-width: 320px; }
.tipn-rota .tipn-field-hint {
	display: block;
	margin-top: var(--s-1);
	font-size: var(--t-micro);
	color: var(--ink-muted);
}
.tipn-rota .tipn-field-error {
	display: block;
	margin-top: var(--s-1);
	font-size: var(--t-small);
	font-weight: 700;
	color: var(--danger-ink);
}
.tipn-rota .tipn-field--bad input { border-color: var(--danger-line); border-width: 2px; }
.tipn-rota .tipn-field-group { display: flex; gap: var(--s-3); flex-wrap: wrap; }
.tipn-rota .tipn-field-group .tipn-field { flex: 1 1 150px; }
.tipn-rota .tipn-form-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-4); }

/* ---------------------------------------------- lists: availability + days - */
.tipn-rota .tipn-daylist { margin-top: var(--s-6); max-width: 560px; }
.tipn-rota .tipn-daylist h2 {
	margin: 0 0 var(--s-3);
	font-size: var(--t-section);
	color: var(--teal-deep);
}
.tipn-rota .tipn-daylist h2:focus-visible { outline: 3px solid var(--teal-text); outline-offset: 3px; }
.tipn-rota .tipn-daylist .tipn-toolbar { margin-top: var(--s-4); }
.tipn-rota .tipn-avail-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s-2);
	padding: var(--s-2) 0;
	border-bottom: 1px solid var(--line);
	font-size: var(--t-small);
}
.tipn-rota .tipn-avail-item:last-child { border-bottom: 0; }
.tipn-rota .tipn-avail-item__right { display: flex; align-items: center; gap: var(--s-2); }
.tipn-rota .tipn-slot-tag {
	font-size: var(--t-micro);
	font-weight: 700;
	color: var(--teal-deep);
	background: var(--teal-wash);
	border-radius: var(--r-pill);
	padding: 2px 10px;
	white-space: nowrap;
}

/* --------------------------------------------------------- small screens -- */
@media (max-width: 700px) {
	.tipn-rota .tipn-rota-body { padding: var(--s-4) var(--s-3) var(--s-5); }
	.tipn-rota .tipn-cal-cell { min-height: 76px; padding: var(--s-1); }
	.tipn-rota .tipn-cal-dayname { font-size: 12px; }
	.tipn-rota .tipn-cal-title { font-size: 20px; }
	.tipn-rota .tipn-booking-chip { font-size: 11px; padding: 2px 4px; }
	.tipn-rota .tipn-day-panel__head h2 { font-size: 20px; }
}

/* Phones: the joined control stacks so every segment keeps a usable target. */
@media (max-width: 520px) {
	/* Every pixel here is a tap target. Inside Enfold's container a 390px phone leaves
	   the grid about 316px, so the page padding, the grid gap and the cell padding all
	   come down to keep each in-grid button at or above 36px wide and its label at 13px.
	   Measured on the real page, not in the mock: the mock has no theme container. */
	.tipn-rota .tipn-rota-body { padding: var(--s-4) var(--s-2) var(--s-5); }
	.tipn-rota .tipn-cal-week,
	.tipn-rota .tipn-cal-grid { gap: 1px; }
	.tipn-rota .tipn-cal-cell { min-height: 0; padding: 2px; }
	.tipn-rota .tipn-cal-date { font-size: 13px; margin-bottom: 2px; }
	.tipn-rota .tipn-cal-dayname { font-size: 13px; }
	.tipn-rota .tipn-seg { flex-direction: column; border-radius: 14px; }
	.tipn-rota .tipn-seg__btn {
		border-right: 0;
		border-bottom: 1px solid var(--line-input);
		min-height: var(--tap-min-dense);
		font-size: 13px;
	}
	.tipn-rota .tipn-seg__btn:last-child { border-bottom: 0; }
	/* A pill that wraps to three lines is not a pill. In a phone-width cell the
	   availability count becomes a plain tinted block instead. */
	.tipn-rota .tipn-avail-badge {
		display: block;
		font-size: 11px;
		line-height: 1.3;
		padding: 2px 4px;
		border-radius: var(--r-card);
		background: var(--teal-wash);
		border-color: var(--teal-wash);
	}
	.tipn-rota .tipn-appbar { padding: var(--s-3); }
	.tipn-rota .tipn-tabs { padding: 0 var(--s-3); }
	.tipn-rota .tipn-tabs a { padding: var(--s-3) var(--s-2); }
}

/* -------------------------------------------------------- reduced motion -- */
@media (prefers-reduced-motion: reduce) {
	.tipn-rota *,
	.tipn-rota *::before,
	.tipn-rota *::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
	}
}

/* ------------------------------------------------------------- printing --- */
@media print {
	.tipn-rota {
		max-width: none;
		font-size: 11pt;
		color: #000;
	}
	.tipn-rota .tipn-appbar,
	.tipn-rota .tipn-tabs,
	.tipn-rota .tipn-rota-foot,
	.tipn-rota .tipn-rota-intro,
	.tipn-rota .tipn-cal-controls,
	.tipn-rota .tipn-toolbar,
	.tipn-rota .tipn-card-actions,
	.tipn-rota .tipn-day-panel__back,
	.tipn-rota .tipn-confirm,
	.tipn-rota .tipn-msg,
	.tipn-rota .tipn-form,
	.tipn-rota .tipn-btn,
	.tipn-rota .tipn-seg { display: none !important; }

	.tipn-rota .tipn-rota-body { padding: 0; }
	.tipn-rota .tipn-cal-title { font-size: 16pt; }
	.tipn-rota .tipn-cal-week,
	.tipn-rota .tipn-cal-grid { gap: 2pt; }
	.tipn-rota .tipn-cal-cell {
		min-height: 70pt;
		border: 0.5pt solid #999;
		background: #fff !important;
		break-inside: avoid;
	}
	.tipn-rota .tipn-cal-cell--weekend { background: #f0f0f0 !important; }
	.tipn-rota .tipn-cal-cell--bankhol { background: #f6f0e0 !important; }
	.tipn-rota .tipn-avail-badge { border-color: #666; color: #000; }
	.tipn-rota .tipn-booking-chip {
		background: #fff !important;
		color: #000 !important;
		border: 0.5pt solid #666;
		-webkit-line-clamp: initial;
		display: block;
	}
	.tipn-rota .tipn-day-panel { border: 0.5pt solid #999; break-inside: avoid; }
	.tipn-rota .tipn-card { border: 0.5pt solid #999; break-inside: avoid; }
	.tipn-rota a,
	.tipn-rota .tipn-card a { text-decoration: none; color: #000; }
}