/**
 * A car's maintenance plan, the same on the workspace card and on the
 * public page: the share of the plan kept to, then each item and its term.
 * The colours come from the page it sits on - the workspace and the public
 * page each set the same names.
 */
.csh-maintenance-panel__items {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0 20px;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: csh-maintenance-item;
}
.csh-maintenance-panel__items li {
	position: relative;
	min-width: 0;
	padding: 10px 0 10px 28px;
	border-bottom: 1px solid var(--color-divider);
	counter-increment: csh-maintenance-item;
}
.csh-maintenance-panel__items li::before {
	content: counter(csh-maintenance-item);
	position: absolute;
	top: 10px;
	left: 0;
	color: var(--color-accent);
	font-size: 12px;
	font-weight: 800;
}
.csh-maintenance-panel__items strong,
.csh-maintenance-panel__items span { display: block; }
.csh-maintenance-panel__items strong { overflow-wrap: anywhere; font-size: 13px; line-height: 1.3; }
.csh-maintenance-panel__items span { margin-top: 3px; color: var(--color-neutral-700); font-size: 11px; }
.csh-maintenance-panel__items span span { display: inline; margin: 0 3px; }

/* The two charts of the plan. The first is how much of the plan the car
   keeps to; each item then shows how much of its interval has gone by, in
   red as the shop's presentation has it, and the whole of it once overdue;
   what is left of it is yellow. Both colours are fixed, not the shop's
   accent, so a later change of the accent colour cannot make the two
   halves alike. */
.csh-plan-share { margin: 18px 0 8px; }
.csh-plan-share__label { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 0 0 8px; font-size: 15px; font-weight: 700; }
.csh-plan-share__label span { color: var(--color-text); font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Done in teal, past its date in red, never done in plain grey - as the public ring. */
.csh-plan-share__bar { display: flex; height: 12px; border-radius: 6px; background: var(--color-neutral-300); overflow: hidden; }
.csh-plan-share__bar > div { height: 100%; }
.csh-plan-share__done { background: #00a9a5; }
.csh-plan-share__overdue { background: #f40009; }
.csh-plan-term-row { display: flex; align-items: center; gap: 10px; margin-top: 7px; }
/* The red is Coca-Cola red. The yellow is light and the red dark, so a page
   printed in black and white still tells the two apart: dark grey for the
   time gone, light for the rest. */
.csh-plan-term { flex: 1 1 auto; box-sizing: border-box; height: 8px; border-radius: 4px; background: #f5c518; overflow: hidden; }
.csh-plan-term > div { height: 100%; background: #f40009; }
.csh-plan-term[data-csh-plan-term="not_started"] { background: transparent; border: 1px solid var(--color-neutral-400); }
.csh-maintenance-panel__items .csh-plan-term__months { flex: 0 0 auto; margin: 0; color: var(--color-text); font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; }
/* A printer leaves out background colours unless told otherwise, and the
   bars are nothing else. */
.csh-plan-share__bar,
.csh-plan-share__bar > div,
.csh-plan-term,
.csh-plan-term > div { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

@media (max-width: 900px) {
	.csh-maintenance-panel__items { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
	.csh-maintenance-panel__items { grid-template-columns: 1fr; }
}

/* The public page draws the plan in rings: a ring of the share kept to,
   then a card an item with a ring of its time left. Rings are strokes, not
   filled areas, so they print as they are; the figures and the lines under
   each name carry the same news on a sheet printed in grey. */
.csh-plan-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; padding: 24px 28px; border-radius: 12px; background: #e9eeee; }
.csh-plan-summary p { margin: 0; }
.csh-plan-summary__title { font-size: 22px; font-weight: 800; line-height: 1.2; }
.csh-plan-summary .csh-plan-summary__counts { margin-top: 6px; color: var(--color-neutral-700); font-size: 14px; }
.csh-plan-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 16px; margin: 16px 0 0; padding: 0; list-style: none; }
.csh-plan-card { display: flex; align-items: center; gap: 16px; min-width: 0; padding: 18px 20px; border: 1px solid #a8b2b2; border-radius: 10px; background: #fff; break-inside: avoid; }
.csh-plan-card--overdue { border-color: #f9a3a6; }
.csh-plan-card__text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.csh-plan-card__text strong { font-size: 15px; line-height: 1.3; overflow-wrap: break-word; }
.csh-plan-card__state { color: var(--color-neutral-700); font-size: 13px; }
.csh-plan-card--on_time .csh-plan-card__state { color: #00807c; font-weight: 700; }
.csh-plan-card--overdue .csh-plan-card__state { color: #f40009; font-weight: 700; }
.csh-plan-card__details { color: var(--color-neutral-700); font-size: 12px; }
.csh-plan-ring { position: relative; display: grid; flex: 0 0 64px; place-items: center; width: 64px; height: 64px; }
.csh-plan-ring--large { flex-basis: 96px; width: 96px; height: 96px; }
.csh-plan-ring__chart { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.csh-plan-ring__chart circle { fill: none; stroke-width: 4; }
.csh-plan-ring__track { stroke: #e1e6e6; }
.csh-plan-ring__done { stroke: #00a9a5; }
.csh-plan-ring__left { stroke: #f5c518; }
.csh-plan-ring__gone { stroke: #f40009; }
.csh-plan-ring__overdue { stroke: #f40009; }
.csh-plan-ring__chart .csh-plan-ring__outline { stroke: #a8b2b2; stroke-width: 1; }
.csh-plan-ring__chart .csh-plan-ring__dash { stroke: #9aa5a5; stroke-width: 1.5; }
.csh-plan-ring__label { position: relative; display: flex; flex-direction: column; align-items: center; line-height: 1; }
.csh-plan-ring__value { font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; }
.csh-plan-ring--large .csh-plan-ring__value { font-size: 22px; }
.csh-plan-card--overdue .csh-plan-ring__value { color: #f40009; }
.csh-plan-card--not_started .csh-plan-ring__value { color: #9aa5a5; font-size: 18px; font-weight: 400; }
.csh-plan-ring__unit { margin-top: 3px; color: var(--color-neutral-700); font-size: 10px; }

@media (max-width: 640px) {
	.csh-plan-summary { padding: 20px; }
}

/* The public page keeps its sections whole on paper, but the plan is taller
   than what is left of the first page and would leave it blank: it runs on
   over the fold, a card never split. */
@media print {
	.csh-public .csh-public-plan { break-inside: auto; }
	.csh-public .csh-public-plan > div:first-child,
	.csh-public .csh-plan-summary { break-after: avoid; }
	.csh-public .csh-plan-summary { border: 1px solid #a8b2b2 !important; }
}