/* ============================================================
   CALENDAR - STRUCTURE

   No colours in this file, and no second file beside it either. Every
   colour comes from a site theme token, which is what the Anatomy of a
   Page reference recommends for a new page: eight themes already exist,
   and a per-theme stylesheet would mean eight copies to keep in step.

   If you find yourself typing a # in here, it is either a token that
   does not exist yet or a decision that belongs in the theme.

   The one exception is an item's own colour, which is data rather than
   design - somebody picked it - and arrives as an inline style from
   the swatch picker.
   ============================================================ */

:root {
	--cal-display: 'Trebuchet MS', 'Segoe UI', Arial, sans-serif;
	--cal-rail-width: 15rem;
}

/* Core caps .Master at 1920px and centres it, which leaves the app
   sitting in a pool of dead space on a wide screen. Six other pages
   already override this, so it is the house pattern.

   The flex column lets the work area take the leftover height instead
   of a guessed vh number: header, nav, toolbar and footer take what
   they need and .cal-work absorbs the rest. */
/* height, NOT min-height - and this is the line the snap-to-a-day
   behaviour depends on.

   min-height lets the column grow to fit its contents, so a month of
   thirty-one days makes the whole PAGE tall and .cal-agenda's
   overflow-y never engages. Clicking the 22nd then scrolls the
   document, which carries the mini grid off the top of the screen -
   scrolling the one control you were using away from you.
   A bounded height gives the flex chain something to divide up, so the
   agenda scrolls inside itself and the rail stays put. */
.Master {
	max-width: none;
	height: 100vh;
	height: 100dvh;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

/* The shared styles set display on a great many things, and an element
   that sets its own display ignores the hidden attribute without this.
   Straight out of the page reference.

   .cal-app itself too: its display: flex below would otherwise draw the
   empty calendar under the share page's "this link does not open a
   calendar", and flash it on the calendar page while the account is
   checked. */
.cal-app[hidden],
.cal-app [hidden],
.cal-dialog [hidden] {
	display: none !important;
}

.cal-checking {
	padding: 2rem 1rem;
	text-align: center;
	color: var(--ink-muted);
	font-size: calc(1rem * var(--font-scale, 1));
}

.cal-app {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	min-height: 0;
	color: var(--ink);
}


/* ---- toolbar --------------------------------------------------- */

.cal-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	padding: 0.6rem 0.9rem;
	border-bottom: 1px solid var(--rule);
	background: var(--surface-alt);
}

.cal-toolbar-gap {
	flex: 1 1 auto;
}

.cal-month {
	font-family: var(--cal-display);
	font-size: calc(1.25rem * var(--font-scale, 1));
	margin: 0;
	min-width: 11ch;
	text-align: center;
	color: var(--ink);
}

.cal-btn {
	font: inherit;
	font-size: calc(0.95rem * var(--font-scale, 1));
	padding: 0.35rem 0.8rem;
	border: 1px solid var(--field-border);
	border-radius: 0.3rem;
	background: var(--button-bg);
	color: var(--button-ink);
	cursor: pointer;
}

.cal-btn:hover {
	background: var(--button-hover-bg);
}

.cal-btn:focus-visible,
.cal-link:focus-visible,
.cal-day:focus-visible {
	outline: 2px solid var(--focus-ring);
	outline-offset: 2px;
}

.cal-btn-primary {
	background: var(--accent);
	color: var(--on-accent);
	border-color: var(--accent);
}

.cal-btn-danger {
	color: var(--danger);
	border-color: var(--danger);
}

.cal-step {
	min-width: 2.4rem;
}

.cal-link {
	font: inherit;
	font-size: calc(0.85rem * var(--font-scale, 1));
	background: none;
	border: none;
	padding: 0.3rem 0;
	color: var(--accent);
	cursor: pointer;
	text-align: left;
}

.cal-link:hover {
	text-decoration: underline;
}


/* ---- the two columns ------------------------------------------- */

.cal-work {
	flex: 1 1 auto;
	display: flex;
	min-height: 0;
}

.cal-rail {
	flex: 0 0 var(--cal-rail-width);
	display: flex;
	flex-direction: column;
	gap: 0.9rem;
	padding: 0.9rem;
	border-right: 1px solid var(--rule);
	background: var(--surface-alt);
	overflow-y: auto;
}

.cal-agenda {
	flex: 1 1 auto;
	overflow-y: auto;
	padding: 0.4rem 0 3rem;
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	.cal-agenda {
		scroll-behavior: auto;
	}
}


/* ---- the mini month -------------------------------------------- */

.cal-mini-heads,
.cal-mini-grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 2px;
}

.cal-mini-heads {
	margin-bottom: 2px;
}

.cal-mini-heads span {
	text-align: center;
	font-size: calc(0.7rem * var(--font-scale, 1));
	letter-spacing: 0.04em;
	color: var(--ink-faint);
	text-transform: uppercase;
}

/* A square cell whatever the rail's width turns out to be, so the grid
   never goes lopsided when the text size setting changes. */
.cal-day {
	font: inherit;
	font-size: calc(0.85rem * var(--font-scale, 1));
	aspect-ratio: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1px;
	border: 1px solid transparent;
	border-radius: 0.25rem;
	background: none;
	color: var(--ink);
	cursor: pointer;
	padding: 0;
}

.cal-day:hover {
	background: var(--selected-bg);
}

.cal-day-blank {
	visibility: hidden;
}

/* Today is outlined; the day you clicked is filled. Two different
   jobs, so two different treatments rather than one colour fighting
   itself. */
.cal-day-today {
	border-color: var(--accent-line);
	font-weight: 700;
}

.cal-day-picked {
	background: var(--accent);
	color: var(--on-accent);
}

.cal-day-picked .cal-dot {
	background: var(--on-accent);
}

/* The dot under a day number. Only drawn when something is on that day,
   and coloured by the worst thing on it - which is the whole point of
   the ladder. */
.cal-dot {
	width: 0.32rem;
	height: 0.32rem;
	border-radius: 50%;
	background: var(--ink-faint);
}

.cal-dot-blank {
	background: transparent;
}


/* ---- urgency --------------------------------------------------- */

/* The ladder, and the only place it is spelled out. Nothing here is a
   new colour: the site already defines these four in all eight themes,
   which is why the red-orange-lighter idea cost no tokens at all. */
.u-quiet    { --cal-urgency: var(--ink-faint); }
.u-soon     { --cal-urgency: var(--info); }
.u-urgent   { --cal-urgency: var(--warn); }
.u-imminent { --cal-urgency: var(--danger); }
.u-overdue  { --cal-urgency: var(--danger); }

.cal-dot.u-quiet,
.cal-dot.u-soon,
.cal-dot.u-urgent,
.cal-dot.u-imminent,
.cal-dot.u-overdue {
	background: var(--cal-urgency);
}


/* ---- the picture ----------------------------------------------- */

.cal-picture {
	margin: 0;
	border-radius: 0.4rem;
	overflow: hidden;
	line-height: 0;
}

.cal-picture img {
	width: 100%;
	height: auto;
	display: block;
}


/* ---- calendar switches ----------------------------------------- */

.cal-rail-head {
	font-family: var(--cal-display);
	font-size: calc(0.8rem * var(--font-scale, 1));
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ink-faint);
	margin: 0 0 0.4rem;
}

/* The switch and its pencil side by side. The pencil sits OUTSIDE the
   label on purpose - inside it, every click on the pencil would also
   toggle the calendar off. */
.cal-switch-row {
	display: flex;
	align-items: center;
	gap: 0.25rem;
	min-width: 0;
}

.cal-switch {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.2rem 0;
	font-size: calc(0.92rem * var(--font-scale, 1));
	cursor: pointer;
	min-width: 0;
}

/* Quiet until wanted, but never hidden. Revealing it only on hover
   would leave it undiscoverable on a touch screen, where nothing ever
   hovers. */
.cal-switch-edit {
	flex: 0 0 auto;
	font: inherit;
	font-size: calc(0.85rem * var(--font-scale, 1));
	line-height: 1;
	padding: 0.25rem 0.35rem;
	border: 1px solid transparent;
	border-radius: 0.25rem;
	background: none;
	color: var(--ink-faint);
	cursor: pointer;
}

.cal-switch-edit:hover,
.cal-switch-edit:focus-visible {
	color: var(--accent);
	border-color: var(--rule);
}

.cal-switch-edit:focus-visible {
	outline: 2px solid var(--focus-ring);
	outline-offset: 1px;
}

/* "37 of 500 items in this browser". Small and faint while there is
   room, and only raising its voice when the room is running out. */
.cal-usage {
	margin: 0.6rem 0 0;
	font-size: calc(0.75rem * var(--font-scale, 1));
	color: var(--ink-faint);
	font-variant-numeric: tabular-nums;
}

.cal-usage-warn {
	color: var(--warn);
}

.cal-usage-full {
	color: var(--danger);
	font-weight: 700;
}

.cal-switch input {
	flex: 0 0 auto;
	accent-color: var(--accent);
}

/* The calendar's own colour, inline from the data. A square rather
   than a tinted checkbox, so it still reads when the checkbox is off -
   which is exactly when you need to know which one you turned off. */
.cal-swatch-chip {
	flex: 0 0 auto;
	width: 0.75rem;
	height: 0.75rem;
	border-radius: 0.2rem;
	border: 1px solid var(--rule-strong);
}

.cal-switch-name {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}


/* ---- the agenda ------------------------------------------------ */

.cal-agenda-day {
	display: flex;
	gap: 0.9rem;
	padding: 0.5rem 1rem;
	border-bottom: 1px solid var(--rule);

	/* The snap target. Without this the day lands under the sticky
	   nothing and reads as the day before. */
	scroll-margin-top: 0.5rem;
}

.cal-agenda-day-empty {
	padding-top: 0.3rem;
	padding-bottom: 0.3rem;
}

.cal-agenda-when {
	flex: 0 0 4.2rem;
	text-align: right;
	line-height: 1.2;
	padding-top: 0.15rem;
}

.cal-agenda-dow {
	display: block;
	font-size: calc(0.72rem * var(--font-scale, 1));
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--ink-faint);
}

.cal-agenda-num {
	display: block;
	font-family: var(--cal-display);
	font-size: calc(1.35rem * var(--font-scale, 1));
	color: var(--ink-muted);
}

.cal-agenda-day-today .cal-agenda-num {
	color: var(--accent);
	font-weight: 700;
}

.cal-agenda-day-picked {
	background: var(--selected-bg);
}

.cal-agenda-items {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	min-width: 0;
}

.cal-nothing {
	color: var(--ink-faint);
	font-size: calc(0.85rem * var(--font-scale, 1));
	font-style: italic;
}

/* One appointment. The stripe down the left is the calendar's colour,
   and the dot on the right is how urgent it is - two separate facts
   that people keep trying to encode in one.

   The row is a plain box; what you press sits inside it - a tick box
   for a task, then one button for the rest. A tick box nested INSIDE a
   button is invalid html, which is how this used to be built. */
.cal-item {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	width: 100%;
	font-size: calc(0.95rem * var(--font-scale, 1));
	padding-left: 0.6rem;
	border: 1px solid var(--rule);
	border-left: 4px solid var(--cal-item-colour, var(--rule-strong));
	border-radius: 0.3rem;
	background: var(--surface);
	color: var(--ink);
	min-width: 0;
}

.cal-item:hover {
	background: var(--selected-bg);
}

.cal-item-open {
	flex: 1 1 auto;
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
	min-width: 0;
	padding: 0.35rem 0.6rem 0.35rem 0;
	border: none;
	background: none;
	color: inherit;
	font: inherit;
	text-align: left;
	cursor: pointer;
}

.cal-item-open:focus-visible {
	outline: 2px solid var(--focus-ring);
	outline-offset: -2px;
	border-radius: 0.2rem;
}

.cal-item-time {
	flex: 0 0 auto;
	font-variant-numeric: tabular-nums;
	color: var(--ink-muted);
	font-size: calc(0.85rem * var(--font-scale, 1));
}

.cal-item-title {
	flex: 1 1 auto;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.cal-item-done .cal-item-title {
	text-decoration: line-through;
	color: var(--ink-faint);
}

.cal-item-repeat {
	flex: 0 0 auto;
	color: var(--ink-faint);
	font-size: calc(0.8rem * var(--font-scale, 1));
}

.cal-tick {
	flex: 0 0 auto;
	accent-color: var(--accent);
}


/* ---- the wall grid --------------------------------------------- */

/* The whole month as one screen. Shown instead of the agenda, with the
   rail collapsed - the mini 1-31 grid beside a big 1-31 grid is the
   same month drawn twice, which wastes the width the grid came for. */
.cal-grid-pane {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	min-width: 0;
	min-height: 0;
	padding: 0.5rem 0.6rem 0.6rem;
}

.cal-grid-heads {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 2px;
	padding-bottom: 0.3rem;
}

.cal-grid-heads span {
	text-align: center;
	font-size: calc(0.72rem * var(--font-scale, 1));
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ink-faint);
}

/* --cal-rows is set by grid.js, because a month starting on a Saturday
   needs six rows and one starting on a Monday needs five. Told the
   count explicitly, every row is the same height and the boxes fill
   the screen; left to auto, the last row goes short and the grid sits
   in dead space. */
.cal-grid {
	flex: 1 1 auto;
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	grid-template-rows: repeat(var(--cal-rows, 6), minmax(0, 1fr));
	gap: 2px;
	min-height: 0;
}

.cal-box {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	min-width: 0;
	min-height: 0;
	padding: 0.25rem 0.3rem;
	border: 1px solid var(--rule);
	border-radius: 0.25rem;
	background: var(--surface);
	overflow: hidden;
}

/* The days either side of this month. Still drawn, so the grid lines
   run edge to edge instead of stopping halfway across the first week,
   but quiet enough not to be mistaken for days you can use. */
.cal-box-blank {
	background: var(--surface-alt);
	border-color: transparent;
}

.cal-box-today {
	border-color: var(--accent-line);
	border-width: 2px;
}

.cal-box-picked {
	background: var(--selected-bg);
}

.cal-box-head {
	display: flex;
	align-items: center;
	gap: 0.3rem;
	flex: 0 0 auto;
}

.cal-box-num {
	font-family: var(--cal-display);
	font-size: calc(0.9rem * var(--font-scale, 1));
	color: var(--ink-muted);
	font-variant-numeric: tabular-nums;
}

.cal-box-today .cal-box-num {
	color: var(--accent);
	font-weight: 700;
}

/* min-height 0 so the flex child may actually shrink, and hidden
   rather than auto: a box that scrolls inside a month grid is the one
   behaviour everybody hates about the real ones. What does not fit is
   counted by the "+n more" line instead. */
.cal-box-items {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-height: 0;
	overflow: hidden;
}

.cal-chip {
	display: flex;
	align-items: baseline;
	gap: 0.25rem;
	width: 100%;
	text-align: left;
	font: inherit;
	font-size: calc(0.76rem * var(--font-scale, 1));
	line-height: 1.35;
	padding: 0.1rem 0.3rem;
	border: none;
	border-left: 3px solid var(--cal-item-colour, var(--rule-strong));
	border-radius: 0.2rem;
	background: var(--surface-alt);
	color: var(--ink);
	cursor: pointer;
	min-width: 0;
	flex: 0 0 auto;
}

.cal-chip:hover {
	background: var(--selected-bg);
}

.cal-chip-time {
	flex: 0 0 auto;
	color: var(--ink-muted);
	font-variant-numeric: tabular-nums;
}

.cal-chip-title {
	flex: 1 1 auto;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.cal-chip-done .cal-chip-title {
	text-decoration: line-through;
	color: var(--ink-faint);
}

.cal-box-more {
	font: inherit;
	font-size: calc(0.72rem * var(--font-scale, 1));
	text-align: left;
	background: none;
	border: none;
	padding: 0 0.3rem;
	color: var(--accent);
	cursor: pointer;
	flex: 0 0 auto;
}

.cal-box-more:hover {
	text-decoration: underline;
}

/* In every view but the agenda the rail keeps only the switches - the
   mini month and the picture are the same dates twice beside a month
   grid, a week or a day, and the width is what those views came for. */
.cal-app-wide .cal-rail {
	flex: 0 0 auto;
	max-width: 11rem;
}

.cal-app-wide .cal-mini,
.cal-app-wide .cal-picture,
.cal-app-wide .cal-rail [data-act="picture"] {
	display: none;
}


/* ---- the tabs --------------------------------------------------- */

/* A segmented control rather than four loose buttons, so it reads as
   one choice with four answers - which is what it is. */
.cal-tabs {
	display: flex;
	gap: 2px;
	padding: 2px;
	border: 1px solid var(--field-border);
	border-radius: 0.35rem;
	background: var(--surface);
}

.cal-tab {
	position: relative;
	font: inherit;
	font-size: calc(0.9rem * var(--font-scale, 1));
	padding: 0.3rem 0.8rem;
	border: none;
	border-radius: 0.25rem;
	background: none;
	color: var(--ink-muted);
	cursor: pointer;
}

.cal-tab:hover {
	background: var(--selected-bg);
	color: var(--ink);
}

.cal-tab[aria-selected="true"] {
	background: var(--accent);
	color: var(--on-accent);
}

.cal-tab:focus-visible {
	outline: 2px solid var(--focus-ring);
	outline-offset: 1px;
}

/* The dot sits on the tab's corner like a badge. Its colour comes from
   the same urgency ladder as everything else - the u-* classes set
   --cal-urgency - and the ring in the tab's own colour keeps it a clean
   dot on the chosen tab and the plain ones alike. */
.cal-tab-dot {
	position: absolute;
	top: 0.12rem;
	right: 0.18rem;
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	background: var(--cal-urgency, var(--ink-faint));
	box-shadow: 0 0 0 2px var(--surface);
}

/* On the chosen tab the ring is the on-accent colour, not the accent.
   Several themes' accent is itself a red, and a danger-red dot ringed
   in accent-red on an accent-red tab simply vanished. */
.cal-tab[aria-selected="true"] .cal-tab-dot {
	box-shadow: 0 0 0 2px var(--on-accent);
}

/* Red pulses. "Oh my goodness, do it" should not be something you have
   to go looking for - but a gentle swell, not a flash, and none at all
   for anybody who has asked their machine for less motion. */
.cal-tab-dot.u-imminent,
.cal-tab-dot.u-overdue {
	animation: cal-pulse 1.6s ease-in-out infinite;
}

@keyframes cal-pulse {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.35); }
}

@media (prefers-reduced-motion: reduce) {
	.cal-tab-dot {
		animation: none !important;
	}
}


/* ---- the week and the day ---------------------------------------- */

/* --cal-hour is the whole layout. Every block is positioned in units of
   it, so the text-size setting stretches the day evenly and nothing is
   ever measured in script. --cal-span (7 or 1) is set by the view. */
.cal-time-pane {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	min-width: 0;
	min-height: 0;
}

.cal-time {
	--cal-hour: calc(3rem * var(--font-scale, 1));
	--cal-gutter: 3.4rem;
}

.cal-time-head,
.cal-time-allday {
	flex: 0 0 auto;
	display: grid;
	grid-template-columns: var(--cal-gutter) repeat(var(--cal-span), minmax(0, 1fr));
	border-bottom: 1px solid var(--rule);
}

.cal-time-day {
	font: inherit;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0;
	padding: 0.35rem 0.2rem;
	border: none;
	border-left: 1px solid var(--rule);
	background: none;
	color: var(--ink-muted);
	line-height: 1.15;
	min-width: 0;
}

button.cal-time-day {
	cursor: pointer;
}

button.cal-time-day:hover {
	background: var(--selected-bg);
}

.cal-time-dow {
	font-size: calc(0.7rem * var(--font-scale, 1));
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--ink-faint);
}

.cal-time-num {
	font-family: var(--cal-display);
	font-size: calc(1.15rem * var(--font-scale, 1));
}

.cal-time-day.cal-time-today .cal-time-num {
	color: var(--accent);
	font-weight: 700;
}

.cal-time-day.cal-time-picked {
	background: var(--selected-bg);
}

.cal-time-allday {
	padding: 2px 0;
}

.cal-time-allday .cal-time-gutter {
	align-self: center;
	text-align: right;
	padding-right: 0.4rem;
	font-size: calc(0.68rem * var(--font-scale, 1));
	color: var(--ink-faint);
}

.cal-time-allday-cell {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 0 2px;
	min-width: 0;
	border-left: 1px solid var(--rule);
}

.cal-time-scroll {
	flex: 1 1 auto;
	overflow-y: auto;
	min-height: 0;
}

.cal-time-body {
	display: grid;
	grid-template-columns: var(--cal-gutter) minmax(0, 1fr);
	height: calc(var(--cal-hour) * 24);
}

.cal-time-hours {
	position: relative;
}

/* Centred on its hour line, so "09:00" reads as the line it labels
   rather than as the hour below it. */
.cal-time-hour {
	position: absolute;
	right: 0.4rem;
	transform: translateY(-50%);
	font-size: calc(0.68rem * var(--font-scale, 1));
	color: var(--ink-faint);
	font-variant-numeric: tabular-nums;
}

/* The hour lines are drawn once, across all the columns, as a repeating
   background - twenty-four elements per column would be seven times
   twenty-four elements for lines nobody clicks. */
.cal-time-columns {
	display: grid;
	grid-template-columns: repeat(var(--cal-span), minmax(0, 1fr));
	background-image: repeating-linear-gradient(to bottom,
		var(--rule) 0, var(--rule) 1px,
		transparent 1px, transparent var(--cal-hour));
}

.cal-time-col {
	position: relative;
	border-left: 1px solid var(--rule);
	cursor: pointer;
	min-width: 0;
}

/* No tint for the picked COLUMN - only its heading is marked. A tint the
   full height of the day looked like one enormous event. */

/* One appointment, at its real time and its real length. The stripe is
   the calendar's colour, the same stripe the agenda and the month use. */
.cal-block {
	position: absolute;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: 0.1rem 0.3rem;
	overflow: hidden;
	font: inherit;
	font-size: calc(0.74rem * var(--font-scale, 1));
	line-height: 1.25;
	text-align: left;
	border: 1px solid var(--rule-strong);
	border-left: 3px solid var(--cal-item-colour, var(--rule-strong));
	border-radius: 0.25rem;
	background: var(--surface);
	color: var(--ink);
	cursor: pointer;
	z-index: 1;
}

.cal-block:hover {
	background: var(--selected-bg);
	z-index: 2;
}

.cal-block:focus-visible {
	outline: 2px solid var(--focus-ring);
	outline-offset: 1px;
	z-index: 2;
}

.cal-block-time {
	color: var(--ink-muted);
	font-variant-numeric: tabular-nums;
}

.cal-block-title {
	font-weight: 600;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Too short for two lines: time and title side by side, so the title is
   still there. Stacked, a half-hour block had room for "16:00" and
   nothing else - a time with no idea what it was for. */
.cal-block-short {
	flex-direction: row;
	align-items: baseline;
	gap: 0.3rem;
	white-space: nowrap;
}

.cal-block-short .cal-block-title {
	min-width: 0;
}

.cal-block-done .cal-block-title {
	text-decoration: line-through;
	color: var(--ink-faint);
}

/* Now, as a line across today. Danger-coloured because it is the edge
   everything overdue has just fallen off. */
.cal-now {
	position: absolute;
	left: 0;
	right: 0;
	height: 2px;
	background: var(--danger);
	z-index: 3;
	pointer-events: none;
}

.cal-now::before {
	content: '';
	position: absolute;
	left: -4px;
	top: -3px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--danger);
}


/* ---- to-do lists ------------------------------------------------ */

/* The Lists tab has its own sidebar and no dates, so the page rail and
   the arrows step aside for it. */
.cal-app-lists .cal-rail,
.cal-app-lists .cal-step,
.cal-app-lists [data-act="today"] {
	display: none;
}

/* The second group in the rail sits a little apart from the first. */
.cal-rail-head-next {
	margin-top: 0.9rem;
}

.cal-todo-pane {
	flex: 1 1 auto;
	display: flex;
	min-width: 0;
	min-height: 0;
}

.cal-todo {
	flex: 1 1 auto;
	display: grid;
	grid-template-columns: 13rem minmax(0, 1fr);
	min-height: 0;
}

.cal-lists-side {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	padding: 0.9rem;
	border-right: 1px solid var(--rule);
	background: var(--surface-alt);
	overflow-y: auto;
}

.cal-lists-names {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.cal-lists-name {
	display: flex;
	align-items: center;
	gap: 0.45rem;
	width: 100%;
	font: inherit;
	font-size: calc(0.92rem * var(--font-scale, 1));
	text-align: left;
	padding: 0.35rem 0.5rem;
	border: none;
	border-radius: 0.3rem;
	background: none;
	color: var(--ink);
	cursor: pointer;
	min-width: 0;
}

.cal-lists-name:hover {
	background: var(--selected-bg);
}

.cal-lists-name[aria-current="true"] {
	background: var(--selected-bg);
	font-weight: 700;
}

.cal-lists-name .cal-switch-name {
	flex: 1 1 auto;
}

.cal-lists-count {
	flex: 0 0 auto;
	font-size: calc(0.75rem * var(--font-scale, 1));
	color: var(--ink-faint);
	font-variant-numeric: tabular-nums;
}

.cal-lists-main {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	padding: 1rem 1.2rem 3rem;
	overflow-y: auto;
	min-width: 0;
}

/* The list's own colour as a bar beside its name - the same stripe its
   tasks wear on the calendar, so the two read as one thing. */
.cal-lists-head {
	display: flex;
	align-items: center;
	gap: 0.4rem;
}

.cal-lists-title {
	margin: 0;
	padding-left: 0.6rem;
	border-left: 4px solid var(--cal-item-colour, var(--rule-strong));
	font-family: var(--cal-display);
	font-size: calc(1.3rem * var(--font-scale, 1));
	color: var(--ink);
}

.cal-task-add {
	display: flex;
	gap: 0.5rem;
	max-width: 40rem;
}

.cal-task-input {
	flex: 1 1 auto;
	min-width: 0;
	font: inherit;
	font-size: calc(0.95rem * var(--font-scale, 1));
	padding: 0.45rem 0.6rem;
	border: 1px solid var(--field-border);
	border-radius: 0.3rem;
	background: var(--field-bg);
	color: var(--field-ink);
}

.cal-task-input:focus-visible {
	outline: 2px solid var(--focus-ring);
	outline-offset: 1px;
}

.cal-tasks {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	max-width: 40rem;
}

/* One task: handle, tick, the button that opens it, and a timer when it
   has one. The colour stripe on the left is its list's, or its own. */
.cal-task {
	position: relative;
	display: flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.15rem 0.5rem 0.15rem 0.2rem;
	border: 1px solid var(--rule);
	border-left: 4px solid var(--cal-item-colour, var(--rule-strong));
	border-radius: 0.3rem;
	background: var(--surface);
	color: var(--ink);
}

.cal-task:hover {
	background: var(--selected-bg);
}

/* touch-action: none is what lets a finger drag the handle. Without it
   the browser takes the gesture for a scroll and cancels the drag. */
.cal-task-handle {
	flex: 0 0 auto;
	font: inherit;
	font-size: calc(1rem * var(--font-scale, 1));
	line-height: 1;
	padding: 0.35rem 0.2rem;
	border: none;
	border-radius: 0.2rem;
	background: none;
	color: var(--ink-faint);
	cursor: grab;
	touch-action: none;
}

.cal-task-handle:hover,
.cal-task-handle:focus-visible {
	color: var(--ink);
}

.cal-task-handle:focus-visible {
	outline: 2px solid var(--focus-ring);
	outline-offset: 1px;
}

.cal-task-open {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.1rem;
	min-width: 0;
	padding: 0.35rem 0.3rem;
	border: none;
	background: none;
	color: inherit;
	font: inherit;
	text-align: left;
	cursor: pointer;
}

.cal-task-open:focus-visible {
	outline: 2px solid var(--focus-ring);
	outline-offset: -2px;
	border-radius: 0.2rem;
}

.cal-task-title {
	font-size: calc(0.98rem * var(--font-scale, 1));
	max-width: 100%;
	overflow-wrap: anywhere;
}

.cal-task-done .cal-task-title {
	text-decoration: line-through;
	color: var(--ink-faint);
}

.cal-task-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.45rem;
	font-size: calc(0.78rem * var(--font-scale, 1));
	color: var(--ink-muted);
}

/* When it is due, in the urgency ladder's colour - so an overdue task
   reads red on the list the same way it does on the calendar. */
.cal-task-due {
	color: var(--cal-urgency, var(--ink-muted));
	font-variant-numeric: tabular-nums;
}

.cal-task-due.u-quiet {
	color: var(--ink-muted);
}

.cal-task-due.u-overdue,
.cal-task-due.u-imminent {
	font-weight: 700;
}

.cal-task-glyph {
	color: var(--ink-faint);
}

.cal-task-timer {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 0.35rem;
}

.cal-timer-btn {
	font-size: calc(0.8rem * var(--font-scale, 1));
	padding: 0.2rem 0.55rem;
	white-space: nowrap;
}

.cal-timer-left {
	font-family: ui-monospace, Consolas, monospace;
	font-size: calc(0.85rem * var(--font-scale, 1));
	font-variant-numeric: tabular-nums;
	color: var(--accent);
	font-weight: 700;
	min-width: 3.5rem;
	text-align: right;
}

/* While dragging: the row lifts, and a line shows where it will land.
   The other rows stay put - moving them as well would make the landing
   spot jump about under the pointer. */
.cal-task-dragging {
	z-index: 5;
	box-shadow: 0 4px 14px var(--shadow, rgba(0, 0, 0, 0.25));
	opacity: 0.92;
	cursor: grabbing;
}

.cal-task-gap-before::before,
.cal-task-gap-after::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	height: 3px;
	border-radius: 2px;
	background: var(--accent);
}

.cal-task-gap-before::before {
	top: -0.25rem;
}

.cal-task-gap-after::after {
	bottom: -0.25rem;
}

.cal-lists-empty {
	margin: 0.5rem 0 0;
	color: var(--ink-muted);
	font-size: calc(0.92rem * var(--font-scale, 1));
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6rem;
}

.cal-done-box {
	max-width: 40rem;
	margin-top: 0.6rem;
}

.cal-done-box summary {
	cursor: pointer;
	font-size: calc(0.85rem * var(--font-scale, 1));
	color: var(--ink-muted);
	padding: 0.3rem 0;
}

.cal-done-box summary:focus-visible {
	outline: 2px solid var(--focus-ring);
	outline-offset: 2px;
}

.cal-tasks-done {
	margin-top: 0.3rem;
}

.cal-done-box .cal-link {
	margin-top: 0.4rem;
}

@media (prefers-reduced-motion: reduce) {
	.cal-task-dragging {
		transition: none;
	}
}


/* ---- paper -------------------------------------------------------- */

/* The sheets are never shown on screen. */
.cal-print {
	display: none;
}

/* While printing - and only when the calendar's own Print started it -
   the sheets are the only thing the printer sees. The browser's menu
   Print never sets the class, so it still gets the screen as it is. */
@media print {
	body.cal-printing > *:not(.cal-print) {
		display: none !important;
	}

	body.cal-printing {
		background: #fff !important;
	}

	body.cal-printing .cal-print {
		display: block !important;
	}
}

/* The sheets themselves, in FIXED colours - black ink and plain greys on
   white paper. The page reference allows a fixed colour when it is a
   decision rather than an accident, and this is one. The site already
   swaps every theme to its light colours for printing (the print block
   at the foot of siteTheme-Tokens.css), but those are the screen's warm
   tints and its red; a sheet wants neutral greys that come out the same
   on a black-and-white printer. Scoped to .cal-print, so none of it can
   leak onto the screen.

   The calendar colours survive, because they are data: the bar at the
   start of each entry is its calendar's own colour, and print-color-
   adjust keeps the browser from stripping it. */
.cal-print {
	--paper-ink: #111;
	--paper-soft: #444;
	--paper-faint: #767676;
	--paper-rule: #bdbdbd;
	--paper-rule-strong: #555;
	--paper-shade: #f3f3f3;
	color: var(--paper-ink);
	background: #fff;
	font-family: 'Segoe UI', Arial, Helvetica, sans-serif;
	font-size: 10pt;
	line-height: 1.3;
	-webkit-print-color-adjust: exact;
	print-color-adjust: exact;
}

.cal-sheet {
	break-after: page;
}

.cal-sheet:last-child {
	break-after: auto;
}

.cal-sheet-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 2mm 6mm;
	padding-bottom: 2mm;
	margin-bottom: 3mm;
	border-bottom: 0.6mm solid var(--paper-rule-strong);
}

.cal-sheet-title {
	font-family: 'Trebuchet MS', 'Segoe UI', Arial, sans-serif;
	font-size: 20pt;
	font-weight: 700;
	line-height: 1.1;
}

.cal-sheet-sub {
	font-size: 8.5pt;
	color: var(--paper-faint);
}

/* A month: seven columns, and a height that fits one landscape sheet of
   letter OR A4 with the margins the page sets - so one month is always
   exactly one page, never a month and a stray row. Rows are
   minmax(0, 1fr) and boxes hide overflow, so a crowded day cannot push
   the grid onto a second sheet; paper.js caps the lines per box to
   match, and says "+n more" for the rest. */
.cal-pgrid {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	grid-template-rows: auto repeat(var(--rows, 6), minmax(0, 1fr));
	height: 166mm;
	border-top: 0.3mm solid var(--paper-rule-strong);
	border-left: 0.3mm solid var(--paper-rule-strong);
}

.cal-pgrid-dow {
	padding: 1mm 0;
	font-size: 8pt;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	text-align: center;
	color: var(--paper-soft);
	background: var(--paper-shade);
	border-right: 0.3mm solid var(--paper-rule-strong);
	border-bottom: 0.3mm solid var(--paper-rule-strong);
}

.cal-pbox-day {
	display: flex;
	flex-direction: column;
	gap: 0.5mm;
	padding: 1mm 1.2mm;
	min-height: 0;
	overflow: hidden;
	border-right: 0.3mm solid var(--paper-rule-strong);
	border-bottom: 0.3mm solid var(--paper-rule-strong);
}

.cal-pbox-blank {
	background: var(--paper-shade);
}

.cal-pbox-num {
	font-size: 10pt;
	font-weight: 700;
	line-height: 1.1;
}

/* One entry. The bar is its calendar's colour. */
.cal-pentry {
	display: flex;
	align-items: baseline;
	gap: 1mm;
	min-width: 0;
	padding-left: 1mm;
	border-left: 1.2mm solid var(--cal-item-colour, var(--paper-rule));
	font-size: 7.5pt;
	line-height: 1.25;
	white-space: nowrap;
	overflow: hidden;
}

.cal-pentry-time {
	flex: 0 0 auto;
	color: var(--paper-soft);
	font-variant-numeric: tabular-nums;
}

.cal-pentry-title {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
}

.cal-pentry-done .cal-pentry-title {
	text-decoration: line-through;
	color: var(--paper-faint);
}

.cal-pentry-more {
	font-size: 7pt;
	font-style: italic;
	color: var(--paper-faint);
}

/* A drawn tick box - a form control prints however the browser likes,
   and a pen needs a square. */
.cal-ptick {
	position: relative;
	flex: 0 0 auto;
	display: inline-block;
	width: 2.4mm;
	height: 2.4mm;
	border: 0.3mm solid var(--paper-ink);
	border-radius: 0.3mm;
	align-self: center;
}

.cal-ptick-done::after {
	content: '\2713';
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 80%;
	line-height: 1;
}

/* A flowing sheet - an agenda or a list - is a table so its heading
   repeats at the top of every printed page. */
.cal-pflow {
	width: 100%;
	border-collapse: collapse;
}

.cal-pflow > thead > tr > td,
.cal-pflow > tbody > tr > td {
	padding: 0;
}

/* An agenda: one block per day, never split across two pages. */
.cal-pday {
	padding: 1.6mm 0;
	border-bottom: 0.3mm solid var(--paper-rule);
	break-inside: avoid;
}

.cal-pday-head {
	margin-bottom: 1mm;
	font-size: 10.5pt;
	font-weight: 700;
}

/* An empty day is one quiet line - on paper, "nothing on Thursday" is
   information, but it needs no more room than that. */
.cal-pday-empty {
	padding: 1mm 0;
}

.cal-pday-empty .cal-pday-head {
	display: inline;
	margin: 0;
	font-weight: 600;
	color: var(--paper-soft);
}

.cal-pday-none {
	display: inline;
	margin-left: 2mm;
	font-style: italic;
	color: var(--paper-faint);
}

.cal-pagenda-entry {
	margin: 0.8mm 0 0.8mm 4mm;
	break-inside: avoid;
}

.cal-pagenda-entry .cal-pentry {
	font-size: 9.5pt;
	white-space: normal;
}

.cal-pagenda-entry .cal-ptick {
	width: 3mm;
	height: 3mm;
}

.cal-pentry-notes {
	margin: 0.4mm 0 0 5.2mm;
	font-size: 8.5pt;
	color: var(--paper-soft);
}

/* A to-do list: a box big enough for a pen on every line, then blank
   lines to write on. */
.cal-ptodo-line {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 1mm 3mm;
	min-height: 9mm;
	padding: 2mm 0;
	border-bottom: 0.3mm solid var(--paper-rule);
	break-inside: avoid;
}

.cal-ptodo-line .cal-ptick {
	width: 4.5mm;
	height: 4.5mm;
	border-width: 0.4mm;
	border-radius: 0.6mm;
}

.cal-ptodo-text {
	flex: 1 1 auto;
	font-size: 12pt;
}

.cal-ptodo-done .cal-ptodo-text {
	text-decoration: line-through;
	color: var(--paper-faint);
}

.cal-ptodo-due {
	font-size: 9pt;
	color: var(--paper-soft);
	white-space: nowrap;
}

.cal-ptodo-notes {
	flex-basis: 100%;
	margin-left: 7.5mm;
	font-size: 9pt;
	color: var(--paper-soft);
}

/* The dialog's calendar ticks: a column, scrolling if there are many. */
.cal-print-lists {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	max-height: 10rem;
	overflow-y: auto;
	margin-top: 0.3rem;
}


/* ---- reminders ---------------------------------------------------- */

/* The tray: bottom right, clear of the site's toasts at the top. Above
   the page and below any dialog - a modal dialog sits in the browser's
   top layer, so a card can never cover the form somebody is typing in.
   It lives outside .cal-app, so it brings its own guard for the hidden
   attribute. */
.cal-reminders {
	position: fixed;
	right: 1rem;
	bottom: 1rem;
	z-index: 50;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	width: min(22rem, calc(100vw - 2rem));
	max-height: calc(100dvh - 2rem);
}

.cal-reminders[hidden],
.cal-reminders [hidden] {
	display: none !important;
}

.cal-reminders-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.15rem 0.8rem;
	font-size: calc(0.8rem * var(--font-scale, 1));
	color: var(--ink-muted);
	background: var(--surface);
	border: 1px solid var(--rule);
	border-radius: 0.4rem;
	box-shadow: 0 0.2rem 0.6rem var(--shadow);
}

/* Scrolls inside itself when a week of reminders has piled up, so the
   tray never climbs off the top of the screen. */
.cal-reminders-list {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	min-height: 0;
	overflow-y: auto;
}

/* One card. The stripe down its edge is its calendar's colour, the way
   every other view says which calendar a thing belongs to. */
.cal-reminder {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	padding: 0.65rem 0.8rem 0.7rem;
	background: var(--raised);
	color: var(--ink);
	border: 1px solid var(--rule-strong);
	border-left: 0.35rem solid var(--cal-item-colour, var(--accent));
	border-radius: 0.5rem;
	box-shadow: 0 0.35rem 1.1rem var(--shadow);
	animation: cal-reminder-in 0.25s ease-out;
}

@keyframes cal-reminder-in {
	from {
		opacity: 0;
		transform: translateY(0.6rem);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cal-reminder {
		animation: none;
	}
}

/* The title opens the item: a button, so a keyboard can reach it,
   dressed as the heading of the card. */
.cal-reminder-title {
	font: inherit;
	font-family: var(--cal-display);
	font-size: calc(1rem * var(--font-scale, 1));
	font-weight: 700;
	text-align: left;
	color: var(--ink);
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	overflow-wrap: anywhere;
}

.cal-reminder-title:hover {
	text-decoration: underline;
}

.cal-reminder-title:focus-visible {
	outline: 2px solid var(--focus-ring);
	outline-offset: 2px;
}

.cal-reminder-when {
	font-size: calc(0.88rem * var(--font-scale, 1));
}

.cal-reminder-where {
	font-size: calc(0.82rem * var(--font-scale, 1));
	color: var(--ink-muted);
	overflow-wrap: anywhere;
}

.cal-reminder-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 0.4rem;
	margin-top: 0.35rem;
}

.cal-reminder-btn {
	font-size: calc(0.85rem * var(--font-scale, 1));
	padding: 0.25rem 0.7rem;
}

/* The snooze dropdown, dressed as the buttons beside it. */
.cal-reminder-snooze {
	font: inherit;
	font-size: calc(0.85rem * var(--font-scale, 1));
	padding: 0.25rem 0.4rem;
	border: 1px solid var(--field-border);
	border-radius: 0.3rem;
	background: var(--button-bg);
	color: var(--button-ink);
	cursor: pointer;
}

.cal-reminder-snooze:focus-visible,
.cal-reminder-btn:focus-visible {
	outline: 2px solid var(--focus-ring);
	outline-offset: 2px;
}

/* The browser's own menu Print prints the screen as it is. Reminders
   are not part of it. */
@media print {
	.cal-reminders {
		display: none !important;
	}
}


/* ---- subscribed calendars ------------------------------------------- */

/* A subscription's address, how fresh it is, and Refresh now - in its
   calendar's dialog. The address uses the share links' look. */
.cal-feed {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}

.cal-feed-actions {
	display: flex;
	gap: 0.4rem;
}

/* The ready-made calendars in the Subscribe dialog, a row of buttons that
   wraps on a narrow screen. */
.cal-feed-ready {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
}


/* ---- importing ------------------------------------------------------ */

/* The import dialog's choices, shown once a file has been read - spaced
   like the form they sit in. */
.cal-import-choices {
	display: flex;
	flex-direction: column;
	gap: 0.7rem;
}


/* ---- sharing -------------------------------------------------------- */

/* The Share part of a calendar's dialog: its links, one to a card, the
   way to make another, and the download. The share-* names are
   js/share/linkList.js's - the list a box's Share dialog draws too, each
   page styling it its own way. */
.cal-share-body {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin-top: 0.3rem;
}

.cal-share-part,
.share-links {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.share-link {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	padding: 0.55rem 0.65rem;
	border: 1px solid var(--rule);
	border-radius: 0.4rem;
	background: var(--surface-alt);
}

.share-link-what {
	font-size: calc(0.85rem * var(--font-scale, 1));
	color: var(--ink-muted);
}

.share-link-what strong {
	color: var(--ink);
}

/* The address, on show and selectable - so it can be copied by hand
   where a page is not allowed to copy for you. */
.share-link-url {
	font: inherit;
	font-family: ui-monospace, Consolas, monospace;
	font-size: calc(0.78rem * var(--font-scale, 1));
	width: 100%;
	padding: 0.3rem 0.45rem;
	border: 1px solid var(--field-border);
	border-radius: 0.3rem;
	background: var(--field-bg);
	color: var(--field-ink);
	min-width: 0;
}

.share-link-actions,
.share-make {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem;
}

.share-btn {
	font-size: calc(0.85rem * var(--font-scale, 1));
	padding: 0.25rem 0.65rem;
}

.share-make-level {
	font: inherit;
	font-size: calc(0.9rem * var(--font-scale, 1));
	padding: 0.3rem 0.4rem;
	border: 1px solid var(--field-border);
	border-radius: 0.3rem;
	background: var(--field-bg);
	color: var(--field-ink);
}

.cal-share-download .cal-link {
	font-size: inherit;
	padding: 0;
}

/* ---- the shared page -------------------------------------------------

   Somebody else's calendar, read only, at /share/<secret>. The calendar's
   own agenda and mini month, so everything above styles it; this is only
   what that page adds. */

.share-about {
	padding-bottom: 0.6rem;
	margin-bottom: 0.6rem;
	border-bottom: 1px solid var(--rule);
}

.share-title {
	margin: 0;
	font-family: var(--cal-display);
	font-size: calc(1.15rem * var(--font-scale, 1));
	color: var(--ink);
	overflow-wrap: anywhere;
}

.share-level {
	margin: 0.2rem 0 0;
	font-size: calc(0.82rem * var(--font-scale, 1));
	color: var(--ink-muted);
}

.share-note {
	margin-top: 0.8rem;
}

.share-page .share-link-url {
	margin-top: 0.5rem;
}

/* One item, read only - views/detail.js, on this shared page and for a
   subscribed calendar's events on the calendar page. */
.cal-detail-line {
	margin: 0;
	color: var(--ink);
}

/* Notes as they were typed, line breaks and all. */
.cal-detail-notes {
	margin: 0;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
	color: var(--ink-muted);
}


/* ---- the dialogs ----------------------------------------------- */

.cal-dialog {
	border: 1px solid var(--rule-strong);
	border-radius: 0.5rem;
	background: var(--surface);
	color: var(--ink);
	padding: 0;
	max-width: min(30rem, calc(100vw - 2rem));
	width: 100%;
}

.cal-dialog::backdrop {
	background: var(--backdrop, rgba(0, 0, 0, 0.45));
}

.cal-form {
	display: flex;
	flex-direction: column;
	gap: 0.7rem;
	padding: 1.1rem;
}

.cal-form-head {
	font-family: var(--cal-display);
	font-size: calc(1.15rem * var(--font-scale, 1));
	margin: 0;
	color: var(--ink);
}

.cal-field {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	font-size: calc(0.85rem * var(--font-scale, 1));
	color: var(--ink-muted);
	border: none;
	padding: 0;
	margin: 0;
	min-width: 0;
}

.cal-field input,
.cal-field select,
.cal-field textarea {
	font: inherit;
	font-size: calc(0.95rem * var(--font-scale, 1));
	padding: 0.4rem 0.5rem;
	border: 1px solid var(--field-border);
	border-radius: 0.3rem;
	background: var(--field-bg);
	color: var(--field-ink);
	min-width: 0;
}

.cal-field textarea {
	resize: vertical;
}

.cal-row {
	display: flex;
	gap: 0.6rem;
}

.cal-row .cal-field {
	flex: 1 1 auto;
}

.cal-field-time {
	flex: 0 0 8rem;
}

.cal-check {
	display: flex;
	align-items: center;
	gap: 0.45rem;
	font-size: calc(0.95rem * var(--font-scale, 1));
	cursor: pointer;
}

.cal-check input {
	accent-color: var(--accent);
}

/* A choice that cannot be made right now - printing a to-do list with
   no lists yet - reads as unavailable rather than broken. */
.cal-check input:disabled + span {
	color: var(--ink-faint);
}

.cal-swatches legend {
	font-size: calc(0.85rem * var(--font-scale, 1));
	color: var(--ink-muted);
	padding: 0;
}

/* The picker David liked: a block of colour with its hex underneath, so
   the code is pickable and readable rather than hidden behind a
   colour wheel nobody can describe over the phone. */
.cal-swatch-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(4rem, 1fr));
	gap: 0.4rem;
	margin-top: 0.3rem;
}

.cal-swatch {
	font: inherit;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 0.15rem;
	padding: 0;
	border: 2px solid transparent;
	border-radius: 0.3rem;
	background: none;
	cursor: pointer;
}

.cal-swatch-block {
	height: 2rem;
	border-radius: 0.25rem;
	border: 1px solid var(--rule-strong);
}

.cal-swatch-hex {
	font-family: ui-monospace, Consolas, monospace;
	font-size: calc(0.65rem * var(--font-scale, 1));
	color: var(--ink-faint);
	text-align: center;
	letter-spacing: 0.02em;
}

.cal-swatch[aria-pressed="true"] {
	border-color: var(--accent);
}

.cal-swatch[aria-pressed="true"] .cal-swatch-hex {
	color: var(--ink);
	font-weight: 700;
}

.cal-form-error {
	margin: 0;
	color: var(--danger);
	font-size: calc(0.88rem * var(--font-scale, 1));
}

/* The two reminder choices, side by side until the dialog is too narrow
   for both, then one above the other. */
.cal-remind {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}

.cal-remind .cal-row {
	flex-wrap: wrap;
}

.cal-remind .cal-field {
	flex: 1 1 11rem;
}

/* The line under them. Quiet, because it is a fact rather than a
   warning - but there, because it is a fact people would otherwise find
   out by missing something. */
.cal-hint {
	margin: 0;
	font-size: calc(0.8rem * var(--font-scale, 1));
	line-height: 1.4;
	color: var(--ink-muted);
}

.cal-hint .cal-link {
	font-size: inherit;
	padding: 0;
}

/* Stuck to the bottom of the dialog. The form is taller than a laptop
   screen once the colour grid is on it, and a Save button that has
   scrolled out of sight reads as a form with no way to finish - people
   hit Escape and lose what they typed. The negative side margins let
   the bar span the form's padding so it covers what slides under it. */
.cal-form-buttons {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	position: sticky;
	bottom: 0;
	margin: 0.2rem -1.1rem -1.1rem;
	padding: 0.7rem 1.1rem;
	background: var(--surface);
	border-top: 1px solid var(--rule);
}

.cal-pictures {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr));
	gap: 0.5rem;
	max-height: 60vh;
	overflow-y: auto;
}

.cal-picture-pick {
	padding: 0;
	border: 2px solid transparent;
	border-radius: 0.35rem;
	background: none;
	cursor: pointer;
	line-height: 0;
	overflow: hidden;
}

.cal-picture-pick img {
	width: 100%;
	height: 4.5rem;
	object-fit: cover;
	display: block;
}

.cal-picture-pick[aria-pressed="true"] {
	border-color: var(--accent);
}

.cal-picture-none {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 4.5rem;
	font-size: calc(0.8rem * var(--font-scale, 1));
	color: var(--ink-muted);
	border: 1px dashed var(--rule-strong);
	border-radius: 0.3rem;
}


/* A gradient picture in the picker. The dashed border belongs to "None"
   only; a picture needs no outline to be seen. */
.cal-picture-swatch {
	border: none;
}


/* ---- the question dialog ---------------------------------------- */

/* Narrower than the forms: a question with two or three answers reads
   better as a short column than stretched across a wide dialog. */
.cal-ask {
	max-width: min(24rem, calc(100vw - 2rem));
}

.cal-ask-text {
	margin: 0;
	color: var(--ink-muted);
	font-size: calc(0.95rem * var(--font-scale, 1));
	line-height: 1.45;
}

/* Stacked, full width. The answers are sentences - "Just this one",
   "All of them" - and side by side they wrap unevenly on a phone. */
.cal-ask-buttons {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	margin-top: 0.4rem;
}

.cal-ask-buttons .cal-btn {
	width: 100%;
}


/* ---- narrow ----------------------------------------------------- */

/* The rail goes above the agenda rather than beside it, and the mini
   grid stops being square-per-cell so it does not eat the screen. */
@media (max-width: 40rem) {
	/* The app shell stops being fixed. With the rail stacked ABOVE the
	   agenda there is nothing to keep on screen, and a phone scrolling
	   one panel inside a page that cannot scroll is the worst of both -
	   so the page scrolls normally again. */
	.Master {
		height: auto;
		min-height: 100dvh;
		overflow: visible;
	}

	.cal-work {
		flex-direction: column;
	}

	.cal-rail {
		flex: 0 0 auto;
		border-right: none;
		border-bottom: 1px solid var(--rule);
		max-height: none;
		overflow-y: visible;
	}

	.cal-mini-grid {
		max-width: 20rem;
	}

	.cal-agenda {
		overflow-y: visible;
	}

	/* A seven column month on a phone gives each day about forty
	   pixels, which fits a number and nothing else. So the boxes get a
	   minimum height and the pane scrolls with the page rather than
	   pretending to be one screen. */
	.cal-grid {
		grid-template-rows: repeat(var(--cal-rows, 6), minmax(4.5rem, auto));
	}

	.cal-app-wide .cal-rail {
		max-width: none;
	}

	/* The tray spans the foot of a phone rather than sitting in a corner
	   of it - and stops at about half the screen, scrolling inside, so a
	   pile of reminders cannot bury the calendar they are about. */
	.cal-reminders {
		left: 0.5rem;
		right: 0.5rem;
		bottom: 0.5rem;
		width: auto;
		max-height: 55dvh;
	}

	/* On a phone the page scrolls, so the day needs a height of its own
	   to scroll inside. Left to grow, it is twenty-four hours tall and
	   the day headings scroll away before the morning even appears. */
	.cal-time-scroll {
		flex: 0 0 auto;
		height: 70vh;
	}

	.cal-time {
		--cal-gutter: 2.6rem;
	}

	.cal-tab {
		padding: 0.3rem 0.55rem;
	}

	/* The lists stack above the chosen one and become a row you can
	   scroll sideways, instead of a sidebar eating half the phone. */
	.cal-todo {
		grid-template-columns: minmax(0, 1fr);
	}

	.cal-lists-side {
		border-right: none;
		border-bottom: 1px solid var(--rule);
		overflow-y: visible;
	}

	.cal-lists-names {
		flex-direction: row;
		overflow-x: auto;
		gap: 0.3rem;
	}

	.cal-lists-name {
		width: auto;
		flex: 0 0 auto;
		border: 1px solid var(--rule);
	}

	.cal-lists-main {
		padding: 0.8rem 0.6rem 2rem;
		overflow-y: visible;
	}

	.cal-month {
		font-size: calc(1.05rem * var(--font-scale, 1));
		min-width: 9ch;
	}
}