/* DiaryDesk extended views. Colours come from the custom properties defined in assets/css/front.css. */
.pkdiary-timeline, .pkdiary-timeline ol { list-style: none; margin: 0; padding: 0; }
.pkdiary-grid { width: 100%; border-collapse: collapse; table-layout: fixed; margin-bottom: 1.5em; }
.pkdiary-grid caption { font-weight: 600; text-align: left; padding: .3em 0; }
.pkdiary-grid th, .pkdiary-grid td { border: 1px solid var(--pkdiary-line); vertical-align: top; padding: .3em; font-size: .85em; height: 4.5em; }
.pkdiary-grid th { height: auto; }
.pkdiary-grid-has { background: var(--pkdiary-accent-tint); }
.pkdiary-grid-n { font-weight: 600; display: block; }
.pkdiary-grid ul { margin: 0; padding: 0; list-style: none; }
.pkdiary-year { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1em; }
.pkdiary-year-month table { width: 100%; border-collapse: collapse; font-size: .8em; }
.pkdiary-year-month td { text-align: center; padding: 2px; }
.pkdiary-year-has { background: var(--pkdiary-accent); color: var(--pkdiary-on-accent, #fff); border-radius: 3px; }
.pkdiary-year-list { font-size: .8em; padding-left: 1em; }
.pkdiary-compact { list-style: none; margin: 0; padding: 0; }
.pkdiary-compact li { padding: .25em 0; }
.pkdiary-dir-filters { display: flex; flex-wrap: wrap; gap: .8em; margin-bottom: .8em; }
@media print { .pkdiary-print, .pkdiary-ics { display: none; } .pkdiary-year { grid-template-columns: repeat(3, 1fr); } }

/*
 * Shared design tokens for the extended views. A theme restyles every view here: fonts are
 * always inherited; colour comes from --pkdiary-accent (Settings > Display > Colours).
 */
.pkdiary {
	--pkdiary-muted: rgba(0, 0, 0, .62);
	--pkdiary-faint: rgba(0, 0, 0, .04);
	--pkdiary-radius: 12px;
	--pkdiary-on-accent: #fff;
}
@supports (color: color-mix(in srgb, red 50%, blue)) {
	.pkdiary {
		--pkdiary-muted: color-mix(in srgb, currentColor 62%, transparent);
		--pkdiary-faint: color-mix(in srgb, var(--pkdiary-accent) 5%, transparent);
	}
}
.pkdiary { font-variant-numeric: tabular-nums; }


/* "Next up" chip and filter pills. */
.pkdiary-chip { display: block; width: max-content; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--pkdiary-on-accent); background: var(--pkdiary-accent); padding: 3px 9px; border-radius: 999px; margin: 0 0 .4em; }
.pkdiary-pills { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 1em; }
.pkdiary-pills[hidden] { display: none; }
.pkdiary-pill { min-height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--pkdiary-line); background: transparent; color: inherit; font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; }
.pkdiary-pill[aria-pressed="true"] { background: var(--pkdiary-accent); border-color: var(--pkdiary-accent); color: var(--pkdiary-on-accent); }
.pkdiary-pill:focus-visible { outline: 2px solid var(--pkdiary-accent); outline-offset: 2px; }
.pkdiary-none[hidden] { display: none; }

/* A: timeline. Compact rows: date, status dot, title with "Status · Area", time to go. */
.pkdiary ol.pkdiary-timeline, .pkdiary ol.pkdiary-timeline ol { list-style: none !important; margin: 0; padding: 0 !important; }
.pkdiary-tl-group > .pkdiary-tl-heading { margin: 0; padding: 14px 0 6px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--pkdiary-muted); white-space: nowrap; }
.pkdiary-tl-today, .pkdiary-tl-item { display: grid; grid-template-columns: 4.8em 14px minmax(0, 1fr) auto; column-gap: 12px; align-items: start; padding: 10px 0; border-top: 1px solid var(--pkdiary-line); }
.pkdiary-tl-today { color: var(--pkdiary-accent-text, var(--pkdiary-accent)); font-weight: 600; border-top: 0; }
.pkdiary-tl-item > .pkdiary-dot { margin-top: .35em; }
.pkdiary-dot-today { width: 14px; height: 14px; background: var(--pkdiary-accent); box-shadow: 0 0 0 4px var(--pkdiary-accent-tint); margin-top: .3em; }
.pkdiary-tl-when .pkdiary-date { display: block; font-weight: 600; line-height: 1.3; }
.pkdiary-tl-sub { display: block; font-size: .78em; color: var(--pkdiary-muted); }
.pkdiary-tl-body .pkdiary-name { font-weight: 600; line-height: 1.4; }
.pkdiary-tl-count { text-align: right; white-space: nowrap; font-weight: 600; font-size: .92em; }
.pkdiary-is-next .pkdiary-tl-count { color: var(--pkdiary-accent-text, var(--pkdiary-accent)); }
.pkdiary-meta { display: block; margin-top: 2px; font-size: .78em; color: var(--pkdiary-muted); }
.pkdiary-meta .pkdiary-source { margin: 0; color: inherit; text-decoration: underline; }
.pkdiary-status[title] { cursor: help; text-decoration: underline dotted; text-underline-offset: 2px; }
@container (max-width: 480px) {
	.pkdiary-tl-today, .pkdiary-tl-item { grid-template-columns: 4.2em 12px minmax(0, 1fr); }
	.pkdiary-tl-count { grid-column: 3; text-align: left; font-size: .78em; color: var(--pkdiary-muted); }
}

/* B: date tiles. */
.pkdiary ul.pkdiary-tiles, .pkdiary ul.pkdiary-cards { list-style: none !important; margin: 0; padding: 0 !important; display: grid; gap: 16px; }
.pkdiary ul.pkdiary-tiles { grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.pkdiary-tile { display: flex; gap: 16px; padding: 16px; border-radius: var(--pkdiary-radius); border: 1px solid var(--pkdiary-line); }
.pkdiary-tile.pkdiary-is-next, .pkdiary-card.pkdiary-is-next { border-color: var(--pkdiary-accent); background: var(--pkdiary-accent-tint); }
.pkdiary-cal { flex: none; width: 68px; height: 76px; border-radius: 8px; overflow: hidden; border: 1px solid var(--pkdiary-line); display: flex; flex-direction: column; text-align: center; }
.pkdiary-cal-m { background: var(--pkdiary-accent); color: var(--pkdiary-on-accent); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 5px 0; }
.pkdiary-cal-d { flex: 1; display: flex; align-items: flex-end; justify-content: center; font-size: 28px; font-weight: 700; line-height: 1; }
.pkdiary-cal-tbc { font-size: 17px; }
.pkdiary-cal-y { font-size: 10px; color: var(--pkdiary-muted); padding: 3px 0 6px; }
.pkdiary-tile-body { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.pkdiary-tile-body .pkdiary-name { font-weight: 600; line-height: 1.4; }
.pkdiary-tile-body .pkdiary-meta { margin-top: auto; padding-top: .5em; }
.pkdiary-tile .pkdiary-when { font-weight: 600; margin-left: auto; }
.pkdiary-tile .pkdiary-when::before { content: none; }
.pkdiary-is-next .pkdiary-when { color: var(--pkdiary-accent-text, var(--pkdiary-accent)); }

/* C: countdown cards. */
.pkdiary ul.pkdiary-cards { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.pkdiary-card { display: flex; flex-direction: column; gap: 10px; padding: 20px; border-radius: var(--pkdiary-radius); border: 1px solid var(--pkdiary-line); }
.pkdiary-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; font-weight: 600; }
.pkdiary-card-top .pkdiary-chip { margin: 0; }
.pkdiary-is-next .pkdiary-card-top .pkdiary-date, .pkdiary-is-next .pkdiary-card-num { color: var(--pkdiary-accent-text, var(--pkdiary-accent)); }
.pkdiary-card-num { font-size: 40px; font-weight: 700; line-height: 1; }
.pkdiary-card-unit { font-size: 14px; color: var(--pkdiary-muted); }
.pkdiary-card .pkdiary-name { font-weight: 600; line-height: 1.4; }
.pkdiary-card .pkdiary-meta { margin-top: auto; }

/* D: by nation. */
.pkdiary-nations th { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--pkdiary-muted); }
.pkdiary-nations thead tr { border-bottom: 2px solid currentColor; }
.pkdiary-nations abbr { text-decoration: none; }
.pkdiary-nation-col { width: 3em; text-align: center !important; }
.pkdiary-in-col { text-align: right !important; white-space: nowrap; }
.pkdiary-nation-date { white-space: nowrap; }
.pkdiary-nation-date .pkdiary-tl-sub { display: inline-block; margin-left: .6em; vertical-align: middle; }
.pkdiary-cal-sm { display: inline-flex; vertical-align: middle; width: 40px; height: 40px; border: 0; border-radius: 8px; background: var(--pkdiary-accent-tint); }
.pkdiary-cal-sm .pkdiary-cal-d { font-size: 16px; align-items: flex-end; }
.pkdiary-cal-sm .pkdiary-cal-m { background: transparent; color: inherit; font-size: 10px; padding: 0 0 3px; }
.pkdiary-nations tr.pkdiary-is-next { background: var(--pkdiary-faint); }
.pkdiary-nations tr.pkdiary-is-next .pkdiary-cal-sm { background: var(--pkdiary-accent); color: var(--pkdiary-on-accent); }
.pkdiary-nations .pkdiary-name { font-weight: 600; }
.pkdiary-tick { display: inline-block; width: 24px; height: 24px; border-radius: 50%; background: var(--pkdiary-accent); position: relative; vertical-align: middle; }
.pkdiary-tick::after { content: ""; position: absolute; left: 8px; top: 5px; width: 6px; height: 11px; border: solid var(--pkdiary-on-accent); border-width: 0 3px 3px 0; transform: rotate(45deg); }
.pkdiary-untick { display: inline-block; width: 10px; height: 2px; background: var(--pkdiary-line); vertical-align: middle; }

/* Themes that square off every span (tagDiv Newspaper does): the shapes carry meaning, so keep them. */
.pkdiary .pkdiary-dot, .pkdiary .pkdiary-tl-dot, .pkdiary .pkdiary-dot-today, .pkdiary .pkdiary-tick { border-radius: 50% !important; }
.pkdiary .pkdiary-chip, .pkdiary .pkdiary-pill { border-radius: 999px !important; }
.pkdiary .pkdiary-tile, .pkdiary .pkdiary-card { border-radius: var(--pkdiary-radius) !important; }
.pkdiary .pkdiary-cal, .pkdiary .pkdiary-cal-sm { border-radius: 8px !important; }

/* Compact tiles (size="compact"): small date tile on a tinted ground, two to a row. */
.pkdiary ul.pkdiary-tiles-compact { grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 12px; }
.pkdiary-tiles-compact .pkdiary-tile { align-items: center; gap: 12px; padding: 12px; border: 0; border-radius: 8px !important; background: var(--pkdiary-faint); }
.pkdiary-tiles-compact .pkdiary-cal { width: 48px; height: 48px; border-radius: 8px !important; justify-content: center; background: #fff; }
.pkdiary-tiles-compact .pkdiary-cal-d { flex: none; align-items: center; font-size: 18px; }
.pkdiary-tiles-compact .pkdiary-cal-tbc { font-size: 12px; }
.pkdiary-cal-m2 { font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--pkdiary-muted); }
.pkdiary-tiles-compact .pkdiary-tile-body .pkdiary-meta { margin-top: 0; padding-top: 0; }

/* Agenda: date, title with its type or nations, time to go. */
.pkdiary ul.pkdiary-agenda { list-style: none !important; margin: 0; padding: 0 !important; }
.pkdiary-ag-item { display: grid; grid-template-columns: 4.6em minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--pkdiary-line); }
.pkdiary-agenda-nocount .pkdiary-ag-item { grid-template-columns: 4.6em minmax(0, 1fr); align-items: start; }
.pkdiary-ag-item > .pkdiary-date { font-weight: 600; font-size: .92em; }
.pkdiary-ag-item.pkdiary-is-now > .pkdiary-date { color: var(--pkdiary-accent-text, var(--pkdiary-accent)); }
.pkdiary-ag-body .pkdiary-name { display: block; line-height: 1.35; }
.pkdiary-ag-body .pkdiary-area { display: block; font-size: .78em; color: var(--pkdiary-muted); margin-top: 2px; }
.pkdiary-ag-item .pkdiary-when { font-size: .85em; white-space: nowrap; }
.pkdiary-chips { display: inline-flex; gap: 3px; }
.pkdiary-nchip { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 20px; border-radius: 4px !important; font-size: 10px; font-weight: 700; background: var(--pkdiary-faint); color: var(--pkdiary-muted); }
.pkdiary-nchip.is-on { background: var(--pkdiary-accent); color: var(--pkdiary-on-accent); }

/* Countdown as a panel: the accent ground, a large figure, the title, date and status. */
.pkdiary-view-countdown { background: var(--pkdiary-accent); color: var(--pkdiary-on-accent); padding: 24px; border-radius: var(--pkdiary-radius); border: 0 !important; box-shadow: none !important; }
.pkdiary-view-countdown .pkdiary-title { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: inherit; margin: 0 0 8px; font-family: inherit; }
.pkdiary-view-countdown a, .pkdiary-view-countdown .pkdiary-more a { color: inherit; }
.pkdiary-countdown { display: flex; flex-direction: column; gap: 8px; }
.pkdiary-cd-n { font-size: 56px; font-weight: 700; line-height: 1; }
.pkdiary-cd-l { font-size: 16px; }
.pkdiary-cd-what { font-size: 1.15em; font-weight: 600; line-height: 1.4; }
.pkdiary-cd-what a { text-decoration: none; }
.pkdiary-cd-date { font-size: .9em; }
.pkdiary-view-countdown .pkdiary-more { margin-top: 16px; }

/* Subscribe panel. */
.pkdiary-view-subscribe { background: var(--pkdiary-accent-tint); padding: 20px; border-radius: var(--pkdiary-radius); border: 0 !important; }
.pkdiary-view-subscribe .pkdiary-title { font-size: 1em; font-weight: 600; margin: 0 0 6px; font-family: inherit; }
.pkdiary-sub-text { margin: 0 0 12px; font-size: .92em; }
.pkdiary-sub-action { margin: 0; }
.pkdiary-button { display: flex; align-items: center; justify-content: center; min-height: 44px; border-radius: 8px !important; background: var(--pkdiary-accent); color: var(--pkdiary-on-accent) !important; font-weight: 600; text-decoration: none !important; }

/* The countdown panel's text is always on-accent, whatever colour a theme gives links. */
.pkdiary .pkdiary-view-countdown, .pkdiary.pkdiary-view-countdown, .pkdiary-view-countdown a, .pkdiary-view-countdown .pkdiary-cd-what, .pkdiary-view-countdown .pkdiary-cd-what a, .pkdiary-view-countdown .pkdiary-title { color: var(--pkdiary-on-accent) !important; }
.pkdiary-view-countdown .pkdiary-title { line-height: 1.3; }
/* Narrow containers (a sidebar): nation chips move under the name rather than squeezing it. */
@container (max-width: 380px) {
	.pkdiary-agenda-nations .pkdiary-ag-item { grid-template-columns: 4.6em minmax(0, 1fr); align-items: start; }
	.pkdiary-agenda-nations .pkdiary-chips { grid-column: 2; }
}
.pkdiary-sub-alt { margin: 10px 0 0; font-size: 13px; }
.pkdiary-sub-alt a { color: inherit; text-decoration: underline; }

/* Countdown hierarchy: a quiet label, the figure, the title, a softer date line, then a small link. */
.pkdiary-view-countdown .pkdiary-title { opacity: .72; }
.pkdiary-view-countdown .pkdiary-cd-what { font-size: 1.2em; }
.pkdiary-view-countdown .pkdiary-cd-date { opacity: .78; font-size: .88em; }
.pkdiary-view-countdown .pkdiary-more { margin-top: 20px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .25); font-size: .88em; }
.pkdiary-view-countdown .pkdiary-more a { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.pkdiary-view-countdown .pkdiary-more a::after { content: " \2192"; }

/* Very narrow (a phone's homepage column, about 230px): the date moves above the title so
   the title gets the full width instead of one word per line. */
@container (max-width: 360px) {
	.pkdiary-tl-today, .pkdiary-tl-item { grid-template-columns: 12px minmax(0, 1fr); column-gap: 10px; row-gap: 2px; }
	.pkdiary-tl-item > .pkdiary-tl-when { grid-column: 1 / -1; display: flex; gap: .5em; align-items: baseline; }
	.pkdiary-tl-when .pkdiary-date { display: inline; }
	.pkdiary-tl-sub { display: inline; }
	.pkdiary-tl-count { grid-column: 2; }
	.pkdiary-ag-item { grid-template-columns: minmax(0, 1fr) auto; }
	.pkdiary-ag-item > .pkdiary-date { grid-column: 1 / -1; }
}

/* A rate change's value on the right of an agenda row: "£13.21" over "per hour". */
.pkdiary-value { display: flex; flex-direction: column; align-items: flex-end; text-align: right; white-space: nowrap; line-height: 1.2; }
.pkdiary-value strong { font-size: 1.25em; font-weight: 700; color: var(--pkdiary-accent-text, var(--pkdiary-accent)); }
.pkdiary-value span { font-size: 12px; color: var(--pkdiary-muted); }

/* Narrow agenda with nation chips: date, then the name at full width, then the chips (the
   360px rule above would otherwise leave the name about 70px beside the chips). */
@container (max-width: 380px) {
	.pkdiary-agenda-nations .pkdiary-ag-item { grid-template-columns: minmax(0, 1fr); row-gap: 4px; }
	.pkdiary-agenda-nations .pkdiary-ag-item > * { grid-column: 1; }
}

/* Subscribe panel: a calendar icon top right, in the accent colour (decorative, so CSS only). */
.pkdiary-view-subscribe .pkdiary-head { flex-wrap: nowrap; align-items: flex-start; }
.pkdiary-view-subscribe .pkdiary-head::after {
	content: ""; flex: none; width: 52px; height: 52px; margin: -4px -4px 0 12px;
	background-color: var(--pkdiary-accent-text, var(--pkdiary-accent));
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4.5' width='18' height='16.5' rx='2'/%3E%3Cpath d='M3 9.5h18M8 2.5v4M16 2.5v4'/%3E%3Cpath d='M7.5 13h2M11 13h2M14.5 13h2M7.5 16.5h2M11 16.5h2'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4.5' width='18' height='16.5' rx='2'/%3E%3Cpath d='M3 9.5h18M8 2.5v4M16 2.5v4'/%3E%3Cpath d='M7.5 13h2M11 13h2M14.5 13h2M7.5 16.5h2M11 16.5h2'/%3E%3C/svg%3E") center / contain no-repeat;
}