/* Schedule planner */

.dp {
	/* Steps out of whatever column it was dropped into. A planner needs the
	   width of the page, and a shortcode has no say in how wide its container
	   is; this is measured from the viewport instead. */
	width: min(
		calc(100vw - 2 * var(--gutter, 24px)),
		calc(var(--wrap, 1480px) - 2 * var(--gutter, 24px))
	);
	max-width: none;
	margin-left: 50%;
	transform: translateX(-50%);

	--dp-line: var(--line, #e6e9f0);
	--dp-line-2: var(--line-strong, #d3d8e3);
	--dp-ink: var(--ink, #131b2e);
	--dp-ink-2: var(--muted, #4a5060);
	--dp-ink-3: var(--faint, #878e9e);
	--dp-paper: var(--paper, #fff);
	--dp-paper-2: #f6f8fb;
	--dp-accent: var(--accent, #3458fa);
	--dp-accent-soft: var(--accent-soft, #e9edfe);
	--dp-mono: var(--mono, ui-monospace, monospace);
}

.dp-grid {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
	gap: 18px;
	align-items: start;
}

@media (max-width: 920px) {
	.dp-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

.dp-card {
	background: var(--dp-paper);
	border: 1px solid var(--dp-line);
	border-radius: var(--radius, 14px);
	padding: 18px 20px;
}

.dp-card + .dp-card {
	margin-top: 16px;
}

.dp .dp-h2 {
	font-family: var(--display, system-ui, sans-serif);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: 0;
	margin: 0 0 14px;
	padding: 0;
	border: 0;
	color: var(--dp-ink);
}

/* The theme sizes headings for articles; inside a panel they are labels. */
.dp h2,
.dp h3 {
	font-size: 17px;
	line-height: 1.25;
	margin: 0 0 14px;
}

.dp p {
	margin: 0 0 10px;
}

.dp label,
.dp .dp-legend-label {
	font-size: 12.5px;
}

.dp-notice {
	background: #fff7e6;
	border: 1px solid #f3d89a;
	border-radius: 10px;
	padding: 10px 14px;
	font-size: 13px;
	color: #8a6116;
	margin: 0 0 16px;
}

/* Fields */

.dp-field {
	display: flex;
	flex-direction: column;
	gap: 5px;
	margin-bottom: 12px;
}

.dp-field > span {
	font-size: 12.5px;
	font-weight: 600;
}

.dp-field em {
	font-style: normal;
	font-weight: 400;
	color: var(--dp-ink-3);
}

.dp input[type="text"],
.dp input[type="number"],
.dp select {
	font: inherit;
	font-size: 14px;
	padding: 9px 12px;
	border: 1px solid var(--dp-line-2);
	border-radius: 9px;
	background: var(--dp-paper);
	color: var(--dp-ink);
	width: 100%;
	box-sizing: border-box;
}

.dp input:focus,
.dp select:focus {
	outline: none;
	border-color: var(--dp-accent);
	box-shadow: 0 0 0 3px rgba(52, 88, 250, 0.13);
}

.dp-row {
	display: flex;
	gap: 10px;
}

.dp-row > * {
	flex: 1;
}

.dp-legend-label {
	font-size: 12.5px;
	font-weight: 600;
	margin: 0 0 6px;
}

/* Picker */

.dp-ac {
	position: relative;
}

.dp-ac-list {
	position: absolute;
	top: calc(100% + 4px);
	left: 0;
	right: 0;
	background: var(--dp-paper);
	border: 1px solid var(--dp-line-2);
	border-radius: 10px;
	max-height: 230px;
	overflow: auto;
	z-index: 20;
	box-shadow: 0 12px 30px -12px rgba(19, 27, 46, 0.3);
}

.dp-ac-list[hidden] {
	display: none;
}

.dp-ac-item {
	display: flex;
	align-items: center;
	gap: 9px;
	width: 100%;
	text-align: left;
	border: 0;
	background: none;
	padding: 8px 12px;
	cursor: pointer;
	font: inherit;
	font-size: 13.5px;
}

.dp-ac-item:hover,
.dp-ac-item.is-on {
	background: var(--dp-accent-soft);
}

.dp-dot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	flex: 0 0 auto;
}

.dp-ac-cat {
	margin-left: auto;
	font-size: 11px;
	color: var(--dp-ink-3);
}

/* Pills */

.dp-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 12px;
}

.dp-pill {
	font: inherit;
	font-size: 12.5px;
	font-weight: 600;
	padding: 6px 12px;
	border: 1px solid var(--dp-line-2);
	border-radius: 999px;
	background: var(--dp-paper);
	color: var(--dp-ink-2);
	cursor: pointer;
}

.dp-pill[aria-pressed="true"] {
	background: var(--dp-accent);
	border-color: var(--dp-accent);
	color: #fff;
}

.dp-quick {
	margin: -6px 0 12px;
	display: flex;
	gap: 10px;
}

.dp-link {
	border: 0;
	background: none;
	padding: 0;
	font: inherit;
	font-size: 12.5px;
	color: var(--dp-accent);
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Buttons */

.dp-btn {
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	padding: 10px 18px;
	border-radius: 999px;
	border: 1px solid var(--dp-line-2);
	background: var(--dp-paper);
	color: var(--dp-ink);
	cursor: pointer;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
}

.dp-btn:hover {
	border-color: var(--dp-accent);
	color: var(--dp-accent);
}

.dp-btn--primary {
	background: var(--dp-accent);
	border-color: var(--dp-accent);
	color: #fff;
	width: 100%;
	justify-content: center;
}

.dp-btn--primary:hover {
	background: var(--accent-hover, #2b49e0);
	color: #fff;
}

.dp-btn--small {
	padding: 5px 12px;
	font-size: 12.5px;
}

.dp-btn[disabled] {
	opacity: 0.6;
	cursor: default;
}

/* Head */

.dp-head {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	margin-bottom: 12px;
}

.dp-head .dp-h2 {
	margin: 0;
}

.dp-head__actions {
	margin-left: auto;
	display: flex;
	gap: 8px;
}

.dp-head__actions .dp-btn--primary {
	width: auto;
}

.dp-field--title {
	max-width: 320px;
}

.dp-status {
	font-size: 13px;
	color: #2c6e2f;
	margin: 0 0 10px;
	min-height: 1em;
}

.dp-status.is-bad {
	color: #b32d2e;
}

/* Entries */

.dp-entries {
	list-style: none;
	margin: 0;
	padding: 0;
}

.dp-entry {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	border: 1px solid var(--dp-line);
	border-left: 4px solid var(--dp-c, var(--dp-line-2));
	border-radius: 0 10px 10px 0;
	padding: 10px 12px;
	margin-bottom: 8px;
}

.dp-entry__main {
	flex: 1;
	min-width: 0;
}

.dp-entry__name {
	font-weight: 700;
	font-size: 14px;
}

.dp-entry__abbr {
	font-weight: 400;
	color: var(--dp-ink-3);
	margin-left: 6px;
	font-family: var(--dp-mono);
	font-size: 12px;
}

.dp-entry__meta {
	font-size: 12px;
	color: var(--dp-ink-2);
	margin-top: 3px;
	line-height: 1.5;
}

.dp-remove {
	border: 0;
	background: none;
	cursor: pointer;
	color: var(--dp-ink-3);
	font-size: 18px;
	line-height: 1;
	padding: 2px 4px;
}

.dp-remove:hover {
	color: #c0392b;
}

.dp-empty,
.dp-no-plans {
	color: var(--dp-ink-3);
	font-size: 13.5px;
	text-align: center;
	padding: 22px 0;
	margin: 0;
}

.dp-empty[hidden],
.dp-no-plans[hidden] {
	display: none;
}

/* Chart */

.dp-tablewrap {
	overflow: auto;
	border: 1px solid var(--dp-line);
	border-radius: 10px;
	margin-top: 14px;
}

/* The theme sets .entry-content table { display: block; overflow-x: auto },
   which outranks a single class and stops a table behaving like one: the
   columns stop sharing the width and the last of them falls off the end. Two
   classes win it back. */
.dp .dp-chart {
	display: table;
	width: 100%;
	table-layout: fixed;
	border-collapse: separate;
	border-spacing: 0;
	font-size: 12.5px;
	overflow: visible;
}

.dp .dp-chart thead {
	display: table-header-group;
}

.dp .dp-chart tbody {
	display: table-row-group;
}

.dp .dp-chart tr {
	display: table-row;
}

.dp .dp-chart th,
.dp .dp-chart td {
	display: table-cell;
}

.dp-chart th,
.dp-chart td {
	border-bottom: 1px solid var(--dp-line);
	border-right: 1px solid var(--dp-line);
	padding: 8px;
	vertical-align: top;
}

.dp-chart th:last-child,
.dp-chart td:last-child {
	border-right: 0;
}

.dp-chart tbody tr:last-child th,
.dp-chart tbody tr:last-child td {
	border-bottom: 0;
}

.dp-chart thead th {
	background: var(--dp-paper-2);
	font-size: 11px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--dp-ink-3);
	text-align: center;
}

.dp .dp-chart tbody th {
	text-align: left;
	white-space: nowrap;
	font-size: 11.5px;
	color: var(--dp-ink-2);
	background: var(--dp-paper-2);
	width: 116px;
}

/* The seven days share whatever is left, so none of them is squeezed out. */
.dp .dp-chart thead th:not(:first-child),
.dp .dp-chart tbody td {
	width: calc((100% - 116px) / 7);
}

.dp-slot {
	display: block;
	border-radius: 6px;
	padding: 4px 7px;
	margin-bottom: 4px;
	font-size: 11.5px;
	line-height: 1.3;
}

.dp-slot:last-child {
	margin-bottom: 0;
}

.dp-slot b {
	display: block;
	font-weight: 700;
}

.dp-slot em {
	font-style: normal;
	font-family: var(--dp-mono);
	font-size: 10.5px;
	opacity: 0.85;
}

.dp-none {
	color: var(--dp-line-2);
}

/* Weeks */

.dp-weeks {
	display: flex;
	gap: 3px;
	flex-wrap: wrap;
	margin-top: 14px;
}

.dp-wk {
	font-family: var(--dp-mono);
	font-size: 10.5px;
	padding: 3px 8px;
	border-radius: 5px;
	background: var(--dp-paper-2);
	color: var(--dp-ink-3);
}

.dp-wk.is-on {
	background: var(--dp-accent-soft);
	color: var(--dp-accent);
	font-weight: 600;
}

.dp-disclaimer {
	font-size: 12px;
	color: var(--dp-ink-3);
	margin: 16px 0 0;
	padding-top: 12px;
	border-top: 1px solid var(--dp-line);
}

/* Saved */

.dp-saved-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.dp-saved-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 0;
	border-top: 1px solid var(--dp-line);
	font-size: 13.5px;
}

.dp-saved-item:first-child {
	border-top: 0;
}

.dp-saved-name {
	flex: 1;
	min-width: 0;
	font-weight: 600;
}

.dp-saved-meta {
	font-family: var(--dp-mono);
	font-size: 11.5px;
	color: var(--dp-ink-3);
}

.dp-signin {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	margin: 0;
	font-size: 14px;
	color: var(--dp-ink-2);
}

/* On the account dashboard */

.dp-saved + .dp-saved {
	margin-top: 26px;
	padding-top: 22px;
	border-top: 1px solid var(--dp-line);
}

.dp-saved__head {
	display: flex;
	align-items: baseline;
	gap: 10px;
	flex-wrap: wrap;
}

.dp-saved__edit {
	margin-left: auto;
	align-self: center;
}

/* On the dashboard the planner is not stepping out of a column: it is already
   inside a panel that has the width it needs. */
.dp.dp-saved {
	width: auto;
	margin-left: 0;
	transform: none;
}

.dp-saved__title {
	font-family: var(--display, system-ui, sans-serif);
	font-size: 17px;
	font-weight: 700;
	margin: 0;
}

.dp-saved__when {
	font-size: 12px;
	color: var(--dp-ink-3);
	margin: 0;
}

.dp-legend {
	list-style: none;
	margin: 12px 0 0;
	padding: 0;
	font-size: 12.5px;
}

.dp-legend li {
	display: flex;
	align-items: baseline;
	gap: 8px;
	padding: 4px 0;
	flex-wrap: wrap;
}

.dp-legend__dot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	flex: 0 0 auto;
	position: relative;
	top: 1px;
}

.dp-legend span {
	color: var(--dp-ink-2);
}

@media print {
	.dp-card--form,
	.dp-head__actions,
	.dp-notice,
	.dp-saved-list-card,
	.dp-field--title,
	.dp-remove {
		display: none !important;
	}

	.dp-grid {
		grid-template-columns: 1fr;
	}

	.dp-card {
		border: 0;
		padding: 0;
	}
}