/*
 * TGD Client Portal.
 *
 * 0.1.9: the measured spec (handoff 2026-11-05-tgd-portal-019-spec). Sizes,
 * spacing and colours come from that spec and the This Gals design system's
 * tokens, not from measuring a mockup image; the images only set the
 * arrangement. Every --tp-* colour below names its token.
 *
 * Rules kept: Raleway and Lato, self-hosted; no shadows; one mauve family;
 * coral at most once per page (Send message's Send button; since 0.1.11 the
 * client's name has no coral rule); WCAG AA on every text node (ratios beside the
 * colours); no page-level horizontal scroll from 320 to 1920; nothing needs
 * JavaScript.
 *
 * Mobile first. Breakpoints: 700px (wider gutters, desktop type, metrics as
 * columns), 1000px (the 96px header; Work's two cards side by side; the
 * latest report beside its cover), 1200px (48px gutters, Overview's two
 * columns). The nav bar replaces the Menu button, and the client's name moves
 * from the page body into the header, at one width per client: as wide as
 * the name needs, at least 1000px. That one media query is printed beside
 * this file by header_css() (includes/format.php); this file holds the
 * narrow side only.
 */

@font-face {
	font-family: "Raleway";
	font-style: normal;
	font-weight: 300;
	font-display: swap;
	src: url("fonts/Raleway-Light.woff2") format("woff2");
}

@font-face {
	font-family: "Raleway";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("fonts/Raleway-Medium.woff2") format("woff2");
}

@font-face {
	font-family: "Raleway";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("fonts/Raleway-SemiBold.woff2") format("woff2");
}

@font-face {
	font-family: "Raleway";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("fonts/Raleway-Bold.woff2") format("woff2");
}

@font-face {
	font-family: "Lato";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("fonts/Lato-Regular.woff2") format("woff2");
}

@font-face {
	font-family: "Lato";
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url("fonts/Lato-Italic.woff2") format("woff2");
}

/* Lato is published at 400 and 700 only; the spec's 600 (buttons, badges,
   text actions) draws with this face. */
@font-face {
	font-family: "Lato";
	font-style: normal;
	font-weight: 600 700;
	font-display: swap;
	src: url("fonts/Lato-Bold.woff2") format("woff2");
}

/* The tokens, and the page's base. wp-login.php shares them (0.1.19:
   assets/login.css), so the login screen's colours are these, by name. */
.tgdcp-body,
body.login {
	/* Surfaces */
	--tp-bg: #fbfbfd;            /* the page: bg-soft */
	--tp-card: #ffffff;          /* header, cards, boxes, form fields: surface-card */
	--tp-panel: #eceef6;         /* the preview strip: bg-mauve */
	--tp-tint: #f2f3f9;          /* the report cover, hovers: mauve-t90 */
	--tp-border: #cccfe5;        /* every border, rule and divider, and nothing else: mauve-t60 */
	--tp-field-border: #727aac;  /* form fields and the drop zone (mauve-s10): 4.1 on white, non-text */

	/* Mauve */
	--tp-primary: #595f86;       /* filled buttons (mauve-s30): white on it 6.17 */
	--tp-primary-hover: #4c5273; /* mauve-s40: white on it 7.60 */
	--tp-accent: #595f86;        /* small accent text, outline buttons, focus rings (mauve-s30): 6.17 white / 6.03 page / 5.32 panel */
	--tp-mauve: #7f88bf;         /* icons and decorative rules; the headline's second sentence, 44px (mauve): 3.26 on the page, large text only */
	--tp-pill: #e5e7f2;          /* the current nav item, status pills, the calm chip, To pill, Needs your input's band: mauve-t80 */
	--tp-count: #cccfe5;         /* the requests pill on that band (mauve-t60): ink on it 9.16 */
	--tp-neutral: #d9dbec;       /* the neutral chip, a note that isn't a comparison (mauve-t70): ink on it 10.29 */

	/* Teal, coral, beige */
	--tp-good: #eaf8f6;          /* the done check's circle, the sent notice: teal-t90 */
	--tp-good-ink: #1c6c61;      /* text on it, the check, View page (teal-s40): 5.72 on it, 6.20 on white */
	--tp-good-chip: #c1e9e3;     /* the "better" chip (teal-t70) */
	--tp-good-chip-ink: #185a51; /* its text (teal-s50): 6.12 on it */
	--tp-teal: #2fb4a1;          /* the report cover's rule (teal), decorative */
	--tp-coral: #f17950;         /* Send message's button (coral) */
	--tp-coral-hover: #f58a62;   /* coral-hover */
	--tp-on-coral: #2a2a38;      /* the label on coral (on-coral): 5.11 */
	--tp-warn-wash: #f3e4cd;     /* the "worse" badge, error notes: ink on it 11.5 */
	--tp-warning: #c79a4e;       /* a blocker's left rule (warning, the design system's): decorative */
	--tp-negative: #c2615f;      /* the billing hold strip (negative, the design system's error colour): white on it 4.06, large text only */

	/* Text */
	--tp-ink: #2a2a38;           /* headings and strong text (ink): 14.5 on white */
	--tp-ink-2: #595f73;         /* body copy, dates, captions (ink-2): 6.38 on white, 6.23 on the page, 5.50 on the panel */
	--tp-on-dark: #ffffff;       /* text on mauve-s30 and darker fills (ink-on-dark) */

	/* Type */
	--tp-font-display: "Raleway", system-ui, -apple-system, "Segoe UI", sans-serif;
	--tp-font-body: "Lato", system-ui, -apple-system, "Segoe UI", sans-serif;

	/* Spacing (0.1.12): one value per kind of space, used by every page.
	   Phones first; the panel, row and cover values grow below. */
	--tp-gutter: 16px;           /* the page's sides (32 from 700px, 48 from 1200px) */
	--tp-space-main: 32px;       /* header to the page's first line (40 from 700px) */
	--tp-space-footer: 40px;     /* the content to the footer */
	--tp-space-subtitle: 12px;   /* a title to the line under it */
	--tp-space-intro: 32px;      /* the page intro to its first content */
	--tp-space-section: 48px;    /* one section to the next, stacked */
	--tp-space-heading: 16px;    /* a section heading to its content */
	--tp-space-columns: 32px;    /* columns side by side */
	--tp-pad-panel: 20px;        /* inside every panel (24 from 700px) */
	--tp-pad-cover: 24px;        /* inside the report cover art (32 from 1000px) */
	--tp-pad-row-y: 20px;        /* a list row, above and below */
	--tp-pad-row-x: 20px;        /* a list row, at the sides (24 from 700px) */
	--tp-gap-icon: 16px;         /* a row's icon to its text */
	--tp-gap-title: 8px;         /* an item's title (or date) to its description */
	--tp-gap-button: 24px;       /* text to its button */
	--tp-gap-label: 8px;         /* a form label to its field */
	--tp-gap-field: 24px;        /* a field to the next label */

	--tp-dur: 200ms;
	--tp-ease: cubic-bezier(0.4, 0, 0.2, 1);

	margin: 0;
	background: var(--tp-bg);
	color: var(--tp-ink);
	font-family: var(--tp-font-body);
	font-size: 17px;
	line-height: 1.65;
	/* Raleway's default figures are old-style; lining figures throughout. */
	font-variant-numeric: lining-nums;
	-webkit-text-size-adjust: 100%;
}

@media (min-width: 700px) {

	.tgdcp-body {
		--tp-gutter: 32px;
		--tp-space-main: 40px;
		--tp-pad-panel: 24px;
		--tp-pad-row-x: 24px;
	}
}

@media (min-width: 1000px) {

	.tgdcp-body {
		--tp-pad-cover: 32px;
	}
}

@media (min-width: 1200px) {

	.tgdcp-body {
		--tp-gutter: 48px;
	}
}

.tp-portal *,
.tp-portal *::before,
.tp-portal *::after {
	box-sizing: border-box;
}

.tp-portal p,
.tp-portal ul,
.tp-portal dl,
.tp-portal dd,
.tp-portal h1,
.tp-portal h2,
.tp-portal h3,
.tp-portal fieldset {
	margin: 0;
}

.tp-portal ul {
	list-style: none;
	padding: 0;
}

.tp-portal fieldset {
	border: 0;
	padding: 0;
	min-width: 0;
}

.tp-portal a {
	color: var(--tp-good-ink);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	transition: color var(--tp-dur) var(--tp-ease), background-color var(--tp-dur) var(--tp-ease), border-color var(--tp-dur) var(--tp-ease);
}

.tp-portal a:hover {
	text-decoration-thickness: 2px;
}

/* Focus: a 3px ring 3px clear of the control, in mauve-s30 (6.2 on white,
   6.0 on the page, 5.3 on the panel). */
.tp-portal a:focus-visible,
.tp-portal button:focus-visible,
.tp-portal select:focus-visible,
.tp-portal summary:focus-visible,
.tp-portal input:focus-visible,
.tp-portal textarea:focus-visible {
	outline: 3px solid var(--tp-accent);
	outline-offset: 3px;
}

/* Icons: mauve, and one stroke weight whatever their size. */
.tp-portal .tp-icon {
	width: 20px;
	height: 20px;
	flex: none;
	color: var(--tp-mauve);
}

.tp-portal .tp-icon * {
	vector-effect: non-scaling-stroke;
	stroke-width: 1.75px;
}

.tp-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.tp-portal .tp-skip {
	position: absolute;
	left: 16px;
	top: -100px;
	z-index: 10;
	padding: 10px 16px;
	background: var(--tp-card);
	border: 2px solid var(--tp-accent);
	border-radius: 8px;
	color: var(--tp-accent);
	font-weight: 700;
}

.tp-portal .tp-skip:focus {
	top: 12px;
}

/* The footer sits at the bottom of the window when a page is short. */
.tp-portal {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.tp-portal .tp-main {
	flex: 1 0 auto;
	padding-top: var(--tp-space-main);
	padding-bottom: var(--tp-space-footer);
}

.tp-portal .tp-main:focus {
	outline: none;
}

/* The container: content at most 1600px wide, gutters 16 / 32 / 48px. */
.tp-portal .tp-wrap {
	width: 100%;
	max-width: calc(1600px + 2 * var(--tp-gutter));
	margin: 0 auto;
	padding-left: var(--tp-gutter);
	padding-right: var(--tp-gutter);
}

/* A status page (not set up, an administrator's pick, Choose a client, the
   first update to come, a page someone's access doesn't include): on the
   page's left edge like every other page, its contents at most 760px wide.
   A new status page in a .tp-narrow wrap lands there by default. */
.tp-portal .tp-narrow > * {
	max-width: 760px;
}

/* Header */
.tp-portal .tp-header {
	background: var(--tp-card);
	border-bottom: 1px solid var(--tp-border);
}

.tp-portal .tp-header-inner {
	position: relative;
	display: flex;
	align-items: center;
	column-gap: 14px;
	min-height: 72px;
}

.tp-portal .tp-logo {
	display: block;
	line-height: 0;
	flex: none;
}

.tp-portal .tp-logo img {
	height: 52px;
	width: auto;
}

/* The divider and the header's text show only with the nav (header_css()). */
.tp-portal .tp-divider {
	display: none;
	width: 1px;
	height: 32px;
	background: var(--tp-border);
	flex: none;
}

/* The client's name and "Client portal", one phrase in the eyebrow style. */
.tp-portal .tp-product {
	display: none;
	margin: 0;
	color: var(--tp-accent);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.12em;
	line-height: 1.5;
	text-transform: uppercase;
	white-space: nowrap;
}

/* Switch client, beside the header's text for someone with several clients.
   Shown with the nav (header_css()); in the Menu below that. */
.tp-portal .tp-switch {
	display: none;
	position: relative;
	flex: none;
}

.tp-portal .tp-switch > summary {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 44px;
	padding: 0 12px;
	border: 1px solid var(--tp-border);
	border-radius: 8px;
	background: var(--tp-card);
	color: var(--tp-accent);
	font-size: 16px;
	line-height: 1.25;
	white-space: nowrap;
	cursor: pointer;
	list-style: none;
}

.tp-portal .tp-switch > summary::-webkit-details-marker {
	display: none;
}

.tp-portal .tp-switch > summary:hover {
	background: var(--tp-tint);
	color: var(--tp-ink);
}

.tp-portal .tp-switch .tp-chevron {
	width: 16px;
	height: 16px;
}

.tp-portal .tp-switch-list {
	position: absolute;
	z-index: 6;
	top: calc(100% + 8px);
	left: 0;
	display: grid;
	gap: 4px;
	min-width: 100%;
	padding: 8px;
	background: var(--tp-card);
	border: 1px solid var(--tp-border);
	border-radius: 12px;
}

.tp-portal .tp-switch-link {
	display: flex;
	align-items: center;
	min-height: 44px;
	padding: 10px 18px;
	border-radius: 8px;
	color: var(--tp-ink);
	font-size: 17px;
	line-height: 1.4;
	text-decoration: none;
	white-space: nowrap;
}

.tp-portal .tp-switch-link:hover {
	background: var(--tp-tint);
}

.tp-portal .tp-switch-link[aria-current="true"],
.tp-portal .tp-menu-links .tp-menu-client[aria-current="true"] {
	background: var(--tp-pill);
	font-weight: 700;
}

.tp-portal .tp-menu-label {
	margin-top: 4px;
	padding: 12px 18px 4px;
	border-top: 1px solid var(--tp-border);
	color: var(--tp-ink-2);
	font-size: 14px;
	line-height: 1.5;
}

.tp-portal .tp-nav {
	display: none;
}

.tp-portal .tp-nav a,
.tp-portal .tp-menu-links a {
	display: inline-flex;
	align-items: center;
	padding: 10px 18px;
	border-radius: 8px;
	color: var(--tp-ink);
	font-size: 17px;
	font-weight: 400;
	line-height: 1.4;
	text-decoration: none;
	white-space: nowrap;
}

.tp-portal .tp-nav a:hover,
.tp-portal .tp-menu-links a:hover {
	background: var(--tp-tint);
	color: var(--tp-ink);
}

.tp-portal .tp-nav a[aria-current="page"],
.tp-portal .tp-menu-links a[aria-current="page"] {
	background: var(--tp-pill);
	color: var(--tp-ink);
}

.tp-portal .tp-nav .tp-signout,
.tp-portal .tp-menu-links .tp-signout {
	color: var(--tp-accent);
}

.tp-portal .tp-nav .tp-signout:hover,
.tp-portal .tp-menu-links .tp-signout:hover {
	background: transparent;
	text-decoration: underline;
}

/* The billing hold strip, under the header on every page while a client's
   account is on hold: the error colour edge to edge, the message and its
   links in white at large-text size (19px bold), so 4.06:1 passes. The links
   follow the message and wrap under it when there's no room; never scrolls.
   Links, not buttons: underlined, with a white focus ring (4.06:1 on the
   strip, past the 3:1 a focus indicator needs). */
.tp-portal .tp-hold {
	background: var(--tp-negative);
	color: #fff;
}

.tp-portal .tp-hold-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--tp-gap-title) var(--tp-gap-button);
	padding-top: var(--tp-space-heading);
	padding-bottom: var(--tp-space-heading);
	font-size: 19px;
	font-weight: 700;
	line-height: 1.4;
}

.tp-portal .tp-hold-text {
	min-width: 0;
	overflow-wrap: anywhere;
}

.tp-portal .tp-hold-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--tp-gap-title) var(--tp-gap-button);
}

.tp-portal .tp-hold-links a {
	color: #fff;
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
	white-space: nowrap;
}

.tp-portal .tp-hold-links a:hover {
	color: #fff;
	text-decoration-thickness: 3px;
}

.tp-portal .tp-hold-links a:focus-visible {
	outline-color: #fff;
}

/* On a phone the nav is a menu: a disclosure, so it works without script. */
.tp-portal .tp-menu {
	margin-left: auto;
}

.tp-portal .tp-menu > summary {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 0 14px;
	border: 1px solid var(--tp-border);
	border-radius: 8px;
	background: var(--tp-card);
	color: var(--tp-ink);
	font-size: 17px;
	cursor: pointer;
	list-style: none;
}

.tp-portal .tp-menu > summary:hover {
	background: var(--tp-tint);
}

.tp-portal .tp-menu > summary::-webkit-details-marker {
	display: none;
}

.tp-portal .tp-menu-links {
	position: absolute;
	z-index: 5;
	top: 100%;
	left: var(--tp-gutter);
	right: var(--tp-gutter);
	display: grid;
	gap: 4px;
	padding: 8px;
	background: var(--tp-card);
	border: 1px solid var(--tp-border);
	border-radius: 12px;
}

.tp-portal .tp-menu-links a {
	width: 100%;
}

/* Administrator preview strip */
.tp-portal .tp-preview {
	background: var(--tp-panel);
	border-bottom: 1px solid var(--tp-border);
	padding: 10px 0;
	font-size: 14px;
	line-height: 1.5;
}

.tp-portal .tp-preview-form {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 12px;
}

.tp-portal .tp-preview-form select {
	font: inherit;
	min-height: 44px;
	padding: 4px 12px;
	border: 1px solid var(--tp-field-border);
	border-radius: 7px;
	background: var(--tp-card);
	color: var(--tp-ink);
	max-width: 100%;
}

/* Buttons: filled mauve; outlined for Download and the choices inside an
   open request; coral for Send message. Lato 16/600, at least 44px tall. */
.tp-portal .tp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 44px;
	padding: 0 18px;
	background: var(--tp-primary);
	border: 0;
	border-radius: 7px;
	color: #fff;
	font-family: var(--tp-font-body);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.25;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
}

.tp-portal .tp-btn:hover {
	background: var(--tp-primary-hover);
	color: #fff;
}

.tp-portal .tp-btn .tp-icon {
	width: 20px;
	height: 20px;
	color: currentColor;
}

/* A request button's paperclip (uploads) or arrow (everything else). */
.tp-portal .tp-btn .tp-btn-icon {
	width: 16px;
	height: 16px;
}

.tp-portal .tp-btn--outline {
	background: var(--tp-card);
	border: 1px solid var(--tp-accent);
	color: var(--tp-accent);
}

.tp-portal .tp-btn--outline:hover {
	background: var(--tp-tint);
	color: var(--tp-ink);
}

.tp-portal .tp-btn--send {
	background: var(--tp-coral);
	color: var(--tp-on-coral);
}

.tp-portal .tp-btn--send:hover {
	background: var(--tp-coral-hover);
	color: var(--tp-on-coral);
}

.tp-portal fieldset:disabled .tp-btn,
.tp-portal fieldset:disabled input,
.tp-portal fieldset:disabled textarea {
	cursor: not-allowed;
	opacity: 0.55;
}

/* Text actions: Change, Cancel, an older report's View and Download. */
.tp-portal .tp-change,
.tp-portal .tp-cancel,
.tp-portal .tp-older-actions a {
	color: var(--tp-accent);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.25;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

.tp-portal .tp-change:hover,
.tp-portal .tp-cancel:hover,
.tp-portal .tp-older-actions a:hover {
	color: var(--tp-ink);
}

/* Page heads: the client's name (after the coral rule), then the date or
   the title, then one line. */
.tp-portal .tp-intro {
	margin-bottom: var(--tp-space-intro);
}

/* The client's name and "Client portal" over the page, while the header has
   the Menu button; it wraps rather than truncates. Hidden with the nav. */
.tp-portal .tp-eyebrow {
	margin-bottom: 12px;
	color: var(--tp-accent);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.12em;
	line-height: 1.5;
	text-transform: uppercase;
}

.tp-portal .tp-period {
	color: var(--tp-ink-2);
}

.tp-portal h1,
.tp-portal h2,
.tp-portal h3 {
	font-family: var(--tp-font-display);
	font-weight: 300;
	color: var(--tp-ink);
}

/* The Overview headline: Raleway 300. Two sentences break after the first,
   and the second is mauve. */
.tp-portal .tp-headline {
	font-size: 34px;
	line-height: 1.12;
	letter-spacing: -0.015em;
}

.tp-portal .tp-headline > span {
	display: block;
}

.tp-portal .tp-headline .tp-headline-2 {
	color: var(--tp-mauve);
}

.tp-portal .tp-title {
	font-size: 32px;
	line-height: 1.15;
}

.tp-portal .tp-subhead {
	margin-top: var(--tp-space-subtitle);
	color: var(--tp-ink-2);
}

/* Section titles: Needs your input, Up next, Recently completed, Older reports,
   Your messages, the latest report's month. */
.tp-portal h2 {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 26px;
	line-height: 1.2;
}

.tp-portal .tp-head-icon {
	width: 28px;
	height: 28px;
}

/* Item titles: requests, Up next, Recently completed, older reports. */
.tp-portal .tp-req-title,
.tp-portal .tp-row-title,
.tp-portal .tp-older-month {
	color: var(--tp-ink);
	font-family: var(--tp-font-display);
	font-size: 19px;
	font-weight: 600;
	line-height: 1.3;
}

.tp-portal .tp-empty {
	color: var(--tp-ink-2);
	font-style: italic;
}

/* Status pages: not set up, choose a client, the first update to come. */
.tp-portal .tp-message {
	background: var(--tp-card);
	border: 1px solid var(--tp-border);
	border-radius: 12px;
	padding: var(--tp-pad-panel);
}

.tp-portal .tp-message h1 {
	font-size: 32px;
	line-height: 1.15;
	margin-bottom: var(--tp-space-subtitle);
}

.tp-portal .tp-message p {
	color: var(--tp-ink-2);
}

/* Badges: chips under the numbers, Planned / In progress, the request count.
   Lato 14/600; words first, the colour only repeats them. */
.tp-portal .tp-chip,
.tp-portal .tp-status,
.tp-portal .tp-pill {
	display: inline-flex;
	align-items: center;
	max-width: 100%;
	padding: 5px 10px;
	border-radius: 6px;
	background: var(--tp-pill);
	color: var(--tp-ink);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.35;
	text-wrap: balance;
}

.tp-portal .tp-chip--good {
	background: var(--tp-good-chip);
	color: var(--tp-good-chip-ink);
}

.tp-portal .tp-chip--neutral {
	background: var(--tp-neutral);
	color: var(--tp-ink);
}

.tp-portal .tp-chip--bad {
	background: var(--tp-warn-wash);
	color: var(--tp-ink);
}

.tp-portal .tp-status {
	color: var(--tp-accent);
	white-space: nowrap;
}

/* Deferred, moved to later on purpose: filled ink-2, white text (6.38), the
   one dark pill, apart from the pale Planned and In progress and the
   outlined Waiting. */
.tp-portal .tp-status--deferred {
	background: var(--tp-ink-2);
	color: #fff;
}

/* Waiting on someone else: an outline, dashed, so it reads apart from the
   filled Planned and In progress. Same size (the border takes 1px of the
   padding). Text ink-2 on the white card, 6.35; border mauve-s10, 4.1. */
.tp-portal .tp-status--waiting {
	padding: 4px 9px;
	background: var(--tp-card);
	border: 1px dashed var(--tp-field-border);
	color: var(--tp-ink-2);
}

.tp-portal .tp-pill {
	padding-left: 12px;
	padding-right: 12px;
	border-radius: 999px;
}

/* Metadata: dates, sent lines, file limits, the footer. */
.tp-portal .tp-date,
.tp-portal .tp-sent,
.tp-portal .tp-older-sent,
.tp-portal .tp-help,
.tp-portal .tp-sentlist-files {
	color: var(--tp-ink-2);
	font-size: 14px;
	line-height: 1.5;
}

/* Overview */
.tp-portal .tp-overview {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
}

.tp-portal .tp-overview > * {
	min-width: 0;
}

.tp-portal .tp-overview > .tp-intro {
	margin-bottom: 20px;
}

.tp-portal .tp-lead {
	margin-bottom: var(--tp-space-intro);
}

/* The metrics panel */
.tp-portal .tp-card-panel {
	background: var(--tp-card);
	border: 1px solid var(--tp-border);
	border-radius: 12px;
	padding: 4px var(--tp-pad-panel);
}

.tp-portal .tp-cards {
	display: grid;
}

.tp-portal .tp-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	padding: 20px 0;
	border-bottom: 1px solid var(--tp-border);
}

.tp-portal .tp-label {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--tp-ink-2);
	font-family: var(--tp-font-body);
	font-size: 14px;
	font-weight: 400;
	letter-spacing: 0.025em;
	line-height: 1.35;
	text-transform: uppercase;
}

.tp-portal .tp-label-icon {
	width: 20px;
	height: 20px;
}

.tp-portal .tp-big {
	color: var(--tp-ink);
	font-family: var(--tp-font-display);
	font-size: 48px;
	font-weight: 300;
	font-variant-numeric: lining-nums tabular-nums;
	line-height: 1.1;
}

/* The supporting row: a rule above, 20px above and below. */
.tp-portal .tp-minis {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 20px 0;
}

.tp-portal .tp-mini {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 24px;
}

.tp-portal .tp-mini-label {
	color: var(--tp-ink);
}

.tp-portal .tp-mini-number {
	color: var(--tp-ink);
	font-family: var(--tp-font-display);
	font-size: 36px;
	font-weight: 300;
	font-variant-numeric: lining-nums tabular-nums;
	line-height: 1.1;
}

.tp-portal .tp-about {
	border-top: 1px solid var(--tp-border);
}

.tp-portal .tp-about summary {
	display: flex;
	align-items: center;
	gap: 8px;
	width: max-content;
	max-width: 100%;
	min-height: 44px;
	margin-top: 8px;
	color: var(--tp-accent);
	line-height: 1.4;
	cursor: pointer;
	list-style: none;
}

.tp-portal .tp-about summary:hover {
	color: var(--tp-ink);
}

.tp-portal .tp-about summary::-webkit-details-marker {
	display: none;
}

.tp-portal .tp-chevron {
	transition: transform var(--tp-dur) var(--tp-ease);
}

.tp-portal details[open] > summary .tp-chevron {
	transform: rotate(180deg);
}

.tp-portal .tp-about-body {
	padding: 8px 0 16px;
}

.tp-portal .tp-about-body dl {
	display: grid;
	gap: 4px 24px;
}

.tp-portal .tp-about-body dt {
	font-weight: 700;
	margin-top: 8px;
}

.tp-portal .tp-about-body dd {
	color: var(--tp-ink-2);
}

.tp-portal .tp-about-notes {
	display: grid;
	gap: 8px;
	margin-top: 16px;
}

.tp-portal .tp-about-notes li {
	display: flex;
	gap: 8px;
	padding: 12px;
	background: var(--tp-tint);
	border-radius: 8px;
	color: var(--tp-ink-2);
}

.tp-portal .tp-about-notes .tp-icon {
	margin-top: 4px;
}

/* General notes: one per line under the card; nothing at all when none. */
.tp-portal .tp-notes {
	display: grid;
	gap: 12px;
	margin-top: 24px;
}

.tp-portal .tp-note {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	color: var(--tp-ink);
}

.tp-portal .tp-note .tp-icon {
	margin-top: 4px;
}

/* Needs your input: a white panel under a tinted band that holds the title
   and the requests pill. Each request is its icon, then title, explanation
   and button in one column; the button is full width on a phone and its own
   width, left under the text, from 700px. */
.tp-portal .tp-over {
	margin-top: var(--tp-space-section);
	background: var(--tp-card);
	border: 1px solid var(--tp-border);
	border-radius: 12px;
}

.tp-portal .tp-over-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 16px;
	padding: var(--tp-pad-panel);
	background: var(--tp-pill);
	border-bottom: 1px solid var(--tp-border);
	border-radius: 11px 11px 0 0;
}

.tp-portal .tp-over-head h2 {
	color: var(--tp-ink);
}

.tp-portal .tp-over-head .tp-pill {
	padding: 6px 16px;
	background: var(--tp-count);
	color: var(--tp-ink);
	font-size: 16px;
	line-height: 1.25;
	white-space: nowrap;
}

.tp-portal .tp-reqs {
	padding: 0 var(--tp-pad-panel);
}

.tp-portal .tp-over > .tp-req-error {
	margin: var(--tp-pad-panel) var(--tp-pad-panel) 0;
}

.tp-portal .tp-over-empty {
	padding: var(--tp-pad-panel);
	color: var(--tp-ink-2);
}

.tp-portal .tp-req {
	display: grid;
	grid-template-columns: 28px minmax(0, 1fr);
	column-gap: var(--tp-gap-icon);
	row-gap: var(--tp-gap-button);
	align-items: start;
	padding: var(--tp-pad-row-y) 0;
	border-top: 1px solid var(--tp-border);
}

.tp-portal .tp-req:first-child {
	border-top: 0;
}

/* A blocker (schema 5): holding up our work. First in the list, on the
   warning wash edge to edge of the panel, a 4px warning rule at the left,
   and "Holding up work" above the title, styled like the metric labels
   (Lato 14/400, uppercase, 0.025em, ink-2 on the wash). Its icon and
   text line up with the other rows. */
.tp-portal .tp-req--blocker {
	margin: 0 calc(-1 * var(--tp-pad-panel));
	padding-left: calc(var(--tp-pad-panel) - 4px);
	padding-right: var(--tp-pad-panel);
	background: var(--tp-warn-wash);
	border-left: 4px solid var(--tp-warning);
}

.tp-portal .tp-req-flag {
	margin-bottom: var(--tp-gap-title);
	color: var(--tp-ink-2);
	font-size: 14px;
	font-weight: 400;
	letter-spacing: 0.025em;
	line-height: 1.35;
	text-transform: uppercase;
}

.tp-portal .tp-req-icon {
	line-height: 0;
}

.tp-portal .tp-req-icon .tp-icon {
	width: 28px;
	height: 28px;
}

.tp-portal .tp-req-text {
	color: var(--tp-ink);
}

.tp-portal .tp-req-detail {
	margin-top: var(--tp-gap-title);
	color: var(--tp-ink-2);
}

.tp-portal .tp-sent {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-top: var(--tp-gap-title);
	white-space: nowrap;
	overflow: hidden;
}

.tp-portal .tp-sent span {
	overflow: hidden;
	text-overflow: ellipsis;
}

.tp-portal .tp-sent .tp-icon {
	width: 16px;
	height: 16px;
	color: var(--tp-good-ink);
}

.tp-portal .tp-req-error {
	margin: 8px 0;
	padding: 8px 12px;
	background: var(--tp-warn-wash);
	border-radius: 8px;
	color: var(--tp-ink);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.4;
}

.tp-portal .tp-act,
.tp-portal .tp-req-link {
	grid-column: 1 / -1;
}

.tp-portal .tp-act > summary {
	list-style: none;
	width: 100%;
}

.tp-portal .tp-act > summary::-webkit-details-marker {
	display: none;
}

.tp-portal .tp-req-link {
	width: 100%;
}

.tp-portal .tp-change {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

.tp-portal .tp-act-body {
	display: grid;
	gap: 12px;
	margin-top: 12px;
	padding: 16px;
	background: var(--tp-card);
	border: 1px solid var(--tp-border);
	border-radius: 12px;
}

.tp-portal .tp-form fieldset {
	display: grid;
	gap: var(--tp-gap-label);
}

.tp-portal .tp-form fieldset > label ~ label {
	margin-top: calc(var(--tp-gap-field) - var(--tp-gap-label));
}

.tp-portal .tp-form label {
	color: var(--tp-ink);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.4;
}

.tp-portal .tp-form textarea,
.tp-portal .tp-form input[type="text"],
.tp-portal .tp-form input[type="file"] {
	width: 100%;
	padding: 9px 12px;
	font: inherit;
	border: 1px solid var(--tp-field-border);
	border-radius: 7px;
	background: var(--tp-card);
	color: var(--tp-ink);
}

.tp-portal .tp-form textarea {
	resize: vertical;
}

.tp-portal .tp-inline {
	display: flex;
	gap: 8px;
}

.tp-portal .tp-inline input {
	flex: 1;
	min-width: 0;
}

.tp-portal .tp-options {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 4px;
}

.tp-portal .tp-current {
	color: var(--tp-ink-2);
}

.tp-portal .tp-current strong {
	color: var(--tp-ink);
}

.tp-portal .tp-form-foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 16px;
	margin-top: 4px;
}

/* White boxes: Work's cards, Reports' cards and empty states, the message
   form. */
.tp-portal .tp-box {
	background: var(--tp-card);
	border: 1px solid var(--tp-border);
	border-radius: 12px;
}

.tp-portal .tp-box-empty {
	padding: var(--tp-pad-panel);
	color: var(--tp-ink-2);
}

/* Work & progress */
.tp-portal .tp-columns {
	display: grid;
	gap: var(--tp-space-section) var(--tp-space-columns);
}

.tp-portal .tp-col > h2 {
	margin-bottom: var(--tp-space-heading);
}

.tp-portal .tp-next li,
.tp-portal .tp-done li {
	display: grid;
	align-items: start;
	border-top: 1px solid var(--tp-border);
}

.tp-portal .tp-next li:first-child,
.tp-portal .tp-done li:first-child {
	border-top: 0;
}

.tp-portal .tp-next li {
	grid-template-columns: 28px minmax(0, 1fr);
	column-gap: var(--tp-gap-icon);
	row-gap: 12px;
	padding: var(--tp-pad-row-y) var(--tp-pad-row-x);
}

.tp-portal .tp-next-icon {
	line-height: 0;
}

.tp-portal .tp-next-icon .tp-icon {
	width: 28px;
	height: 28px;
}

.tp-portal .tp-row-detail {
	margin-top: var(--tp-gap-title);
	color: var(--tp-ink-2);
}

.tp-portal .tp-status {
	grid-column: 2;
	justify-self: start;
}

.tp-portal .tp-done li {
	grid-template-columns: 28px minmax(0, 1fr);
	column-gap: var(--tp-gap-icon);
	row-gap: var(--tp-gap-title);
	padding: var(--tp-pad-row-y) var(--tp-pad-row-x);
}

.tp-portal .tp-done .tp-date {
	grid-column: 1 / -1;
}

.tp-portal .tp-date {
	letter-spacing: 0.04em;
	text-transform: uppercase;
	white-space: nowrap;
}

.tp-portal .tp-done-check {
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--tp-good);
}

.tp-portal .tp-done-check .tp-icon {
	width: 18px;
	height: 18px;
	color: var(--tp-good-ink);
}

.tp-portal .tp-more > summary {
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: 56px;
	padding: 0 var(--tp-pad-row-x);
	border-top: 1px solid var(--tp-border);
	color: var(--tp-accent);
	cursor: pointer;
	list-style: none;
}

.tp-portal .tp-more > summary:hover {
	color: var(--tp-ink);
}

.tp-portal .tp-more > summary::-webkit-details-marker {
	display: none;
}

.tp-portal .tp-more-open,
.tp-portal .tp-more[open] > summary .tp-more-closed {
	display: none;
}

.tp-portal .tp-more[open] > summary .tp-more-open {
	display: inline;
}

.tp-portal .tp-more .tp-done li:first-child {
	border-top: 1px solid var(--tp-border);
}

.tp-portal .tp-view {
	grid-column: 2;
	justify-self: start;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.5;
	white-space: nowrap;
}

/* Reports */
.tp-portal .tp-latest {
	display: grid;
	gap: 24px;
	padding: var(--tp-pad-panel);
	background: var(--tp-card);
	border: 1px solid var(--tp-border);
	border-radius: 12px;
}

/* The cover tile: drawn from the report's data, never a PDF thumbnail. */
.tp-portal .tp-cover {
	padding: var(--tp-pad-cover);
	background: var(--tp-tint);
	border-radius: 8px;
}

.tp-portal .tp-cover-brand {
	color: var(--tp-accent);
	font-size: 20px;
	font-style: italic;
	line-height: 1.4;
}

.tp-portal .tp-cover-client {
	position: relative;
	margin-top: 16px;
	padding-bottom: 16px;
	color: var(--tp-accent);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.12em;
	line-height: 1.5;
	text-transform: uppercase;
}

.tp-portal .tp-cover-client::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: min(100%, 240px);
	height: 2px;
	background: var(--tp-teal);
}

.tp-portal .tp-cover-month {
	margin-top: 16px;
	color: var(--tp-ink);
	font-family: var(--tp-font-display);
	font-size: 30px;
	font-weight: 300;
	line-height: 1.2;
}

.tp-portal .tp-cover-sub {
	color: var(--tp-ink-2);
}

.tp-portal .tp-latest-eyebrow {
	color: var(--tp-accent);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.12em;
	line-height: 1.5;
	text-transform: uppercase;
}

.tp-portal .tp-latest-month {
	display: block;
	margin-top: var(--tp-gap-title);
}

.tp-portal .tp-latest-sent {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: var(--tp-space-subtitle);
	color: var(--tp-ink-2);
}

.tp-portal .tp-latest-line {
	margin-top: var(--tp-gap-title);
}

.tp-portal .tp-latest-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 16px;
	margin-top: var(--tp-gap-button);
}

.tp-portal .tp-older {
	margin-top: var(--tp-space-section);
}

.tp-portal .tp-rule-heading {
	gap: 24px;
	margin-bottom: var(--tp-space-heading);
}

.tp-portal .tp-rule-heading::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--tp-border);
}

.tp-portal .tp-box--empty {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 16px 24px;
	min-height: 120px;
	padding: var(--tp-pad-panel);
	color: var(--tp-ink-2);
	text-align: center;
}

.tp-portal .tp-empty-icon {
	width: 48px;
	height: 48px;
}

.tp-portal .tp-older-list li {
	display: grid;
	grid-template-columns: 24px minmax(0, 1fr);
	align-items: center;
	gap: 4px var(--tp-gap-icon);
	padding: var(--tp-pad-row-y) var(--tp-pad-row-x);
	border-top: 1px solid var(--tp-border);
}

.tp-portal .tp-older-list li:first-child {
	border-top: 0;
}

.tp-portal .tp-older-icon {
	width: 24px;
	height: 24px;
}

.tp-portal .tp-older-sent,
.tp-portal .tp-older-actions {
	grid-column: 2;
}

.tp-portal .tp-older-actions {
	display: flex;
	gap: 24px;
}

/* Choose a client: someone with several, after signing in (a .tp-narrow
   status page). */
.tp-portal .tp-choose li + li {
	border-top: 1px solid var(--tp-border);
}

.tp-portal .tp-choose a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--tp-gap-button);
	min-height: 44px;
	padding: var(--tp-pad-row-y) var(--tp-pad-row-x);
	color: var(--tp-ink);
	font-family: var(--tp-font-display);
	font-size: 19px;
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none;
}

.tp-portal .tp-choose a:hover {
	background: var(--tp-tint);
}

.tp-portal .tp-choose li:first-child a {
	border-radius: 11px 11px 0 0;
}

.tp-portal .tp-choose li:last-child a {
	border-radius: 0 0 11px 11px;
}

.tp-portal .tp-choose li:only-child a {
	border-radius: 11px;
}

.tp-portal .tp-choose .tp-icon {
	flex: none;
	width: 20px;
	height: 20px;
	color: var(--tp-accent);
}

.tp-portal .tp-choose-refused {
	margin: 0 0 var(--tp-space-heading);
}

/* Send a message */
/* At most 1040px wide, its left edge on the page's (and the title's). */
.tp-portal .tp-msg-wrap {
	max-width: 1040px;
}

.tp-portal .tp-notice {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 16px;
	padding: 12px 16px;
	background: var(--tp-good);
	border-radius: 8px;
	color: var(--tp-ink);
	font-weight: 700;
}

.tp-portal .tp-notice .tp-icon {
	width: 24px;
	height: 24px;
	color: var(--tp-good-ink);
}

.tp-portal .tp-msg {
	padding: var(--tp-pad-panel);
}

.tp-portal .tp-msg fieldset {
	display: grid;
}

.tp-portal .tp-to {
	display: flex;
	align-items: center;
	gap: 12px;
	padding-bottom: 16px;
	margin-bottom: 16px;
	border-bottom: 1px solid var(--tp-border);
}

.tp-portal .tp-to-label {
	font-weight: 700;
}

.tp-portal .tp-to-pill {
	display: inline-flex;
	align-items: center;
	padding: 4px 12px;
	border-radius: 8px;
	background: var(--tp-pill);
	color: var(--tp-ink);
}

.tp-portal .tp-field-label {
	margin-bottom: var(--tp-gap-label);
	color: var(--tp-ink);
	font-weight: 700;
	line-height: 1.4;
}

.tp-portal .tp-optional {
	color: var(--tp-ink-2);
	font-weight: 400;
}

.tp-portal .tp-field {
	width: 100%;
	margin-bottom: var(--tp-gap-field);
	padding: 12px 16px;
	font: inherit;
	border: 1px solid var(--tp-field-border);
	border-radius: 8px;
	background: var(--tp-card);
	color: var(--tp-ink);
}

.tp-portal .tp-field::placeholder {
	color: var(--tp-ink-2);
	opacity: 1;
}

.tp-portal .tp-field:hover {
	border-color: var(--tp-accent);
}

.tp-portal textarea.tp-field {
	min-height: 170px;
	resize: vertical;
}

.tp-portal .tp-drop {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 16px;
	min-height: 56px;
	padding: 12px 20px;
	border: 1px dashed var(--tp-field-border);
	border-radius: 8px;
	background: var(--tp-card);
}

/* The real file input covers the whole box: clicking anywhere opens the
   picker, and files dropped on it land in it, with no script. */
.tp-portal .tp-drop input[type="file"] {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	cursor: pointer;
}

.tp-portal .tp-drop:hover {
	border-color: var(--tp-accent);
	background: var(--tp-tint);
}

.tp-portal .tp-drop:focus-within {
	border-color: var(--tp-accent);
	outline: 3px solid var(--tp-accent);
	outline-offset: 3px;
}

.tp-portal .tp-drop .tp-icon {
	width: 24px;
	height: 24px;
}

.tp-portal .tp-drop-text {
	min-width: 0;
	overflow-wrap: anywhere;
}

/* The file limits, inside the drop zone at its right. */
.tp-portal .tp-help {
	margin-left: auto;
}

.tp-portal .tp-msg-actions {
	margin-top: var(--tp-gap-field);
}

.tp-portal .tp-sentlist {
	margin-top: var(--tp-space-section);
}

.tp-portal .tp-sentlist h2 {
	margin-bottom: var(--tp-space-heading);
}

.tp-portal .tp-sentlist li {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 16px;
	padding: var(--tp-pad-row-y) 0;
	border-top: 1px solid var(--tp-border);
}

.tp-portal .tp-sentlist .tp-date {
	min-width: 56px;
}

.tp-portal .tp-sentlist-subject {
	flex: 1 1 200px;
	min-width: 0;
	overflow-wrap: anywhere;
}

/* Footer: a thin divider over the content's width, 16px above the text. */
.tp-portal .tp-foot {
	color: var(--tp-ink-2);
	font-size: 14px;
	line-height: 1.5;
}

/* One footer on all four pages (templates/footer.php): its two lines stacked
   on a phone, apart from 700px. */
.tp-portal .tp-foot .tp-foot-inner {
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 4px 24px;
	width: calc(100% - 2 * var(--tp-gutter));
	max-width: 1600px;
	padding: 16px 0 32px;
	border-top: 1px solid var(--tp-border);
}

@media (prefers-reduced-motion: reduce) {

	.tp-portal a,
	.tp-portal .tp-chevron {
		transition: none;
	}
}

/* From 700px: wider gutters and the spec's desktop type. */
@media (min-width: 700px) {

	.tp-portal .tp-foot .tp-foot-inner {
		flex-direction: row;
	}

	.tp-portal .tp-menu-links {
		left: auto;
		right: var(--tp-gutter);
		width: 280px;
	}

	.tp-portal .tp-logo img {
		height: 60px;
	}

	.tp-portal .tp-headline {
		font-size: 44px;
	}

	.tp-portal .tp-title,
	.tp-portal .tp-message h1 {
		font-size: 40px;
	}

	.tp-portal h2 {
		font-size: 30px;
	}

	/* The metrics as columns split by fine rules, 20px either side. */
	.tp-portal .tp-card-panel {
		padding: var(--tp-pad-panel);
	}

	.tp-portal .tp-cards {
		grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
		padding-bottom: 24px;
	}

	.tp-portal .tp-card {
		padding: 0 20px;
		border-bottom: 0;
		border-left: 1px solid var(--tp-border);
	}

	.tp-portal .tp-card:first-child {
		padding-left: 0;
		border-left: 0;
	}

	.tp-portal .tp-card:last-child {
		padding-right: 0;
	}

	/* The three cards share their rows, so a label that wraps keeps every
	   number on one line: labels sit on the row's bottom, 12px over it. */
	@supports (grid-template-rows: subgrid) {

		.tp-portal .tp-cards {
			grid-template-rows: auto auto auto;
		}

		.tp-portal .tp-card {
			display: grid;
			grid-row: span 3;
			grid-template-rows: subgrid;
			row-gap: 12px;
			align-items: start;
			justify-items: start;
		}

		.tp-portal .tp-card .tp-label {
			align-self: end;
		}
	}

	.tp-portal .tp-minis {
		flex-direction: row;
		flex-wrap: wrap;
		gap: 12px 40px;
		border-top: 1px solid var(--tp-border);
	}

	.tp-portal .tp-mini-number {
		padding-right: 24px;
		border-right: 1px solid var(--tp-border);
	}

	.tp-portal .tp-about-body {
		padding-bottom: 0;
	}

	/* The button under the explanation, at its own width. */
	.tp-portal .tp-act,
	.tp-portal .tp-req-link {
		grid-column: 2;
	}

	.tp-portal .tp-act > summary,
	.tp-portal .tp-req-link {
		width: max-content;
		max-width: 100%;
	}

	/* Up next: icon, text, the pill at the right */
	.tp-portal .tp-next li {
		grid-template-columns: 28px minmax(0, 1fr) auto;
	}

	.tp-portal .tp-status {
		grid-column: 3;
		align-self: center;
	}

	/* Recently completed: date, a fine rule, the check, text, View page */
	.tp-portal .tp-done li {
		grid-template-columns: 64px 28px minmax(0, 1fr) auto;
	}

	.tp-portal .tp-done .tp-date {
		grid-column: 1;
		align-self: stretch;
		padding-top: 2px;
		border-right: 1px solid var(--tp-border);
	}

	.tp-portal .tp-view {
		grid-column: 4;
		align-self: center;
	}

	/* Icon, 16px, the month, then the sent date and the links 24px apart. */
	.tp-portal .tp-older-list li {
		grid-template-columns: 24px minmax(0, 1fr) auto auto;
		gap: 12px var(--tp-gap-icon);
	}

	.tp-portal .tp-older-sent,
	.tp-portal .tp-older-actions {
		grid-column: auto;
		margin-left: calc(var(--tp-gap-button) - var(--tp-gap-icon));
	}
}

@media (min-width: 1000px) {

	/* Shown from the client's own width (header_css()). */
	.tp-portal .tp-nav {
		align-items: center;
		gap: 28px;
		margin-left: auto;
	}

	.tp-portal .tp-header-inner {
		min-height: 96px;
		column-gap: 24px;
	}

	.tp-portal .tp-logo img {
		height: 68px;
	}

	.tp-portal .tp-divider {
		height: 40px;
	}

	.tp-portal .tp-columns {
		grid-template-columns: minmax(0, 776fr) minmax(0, 661fr);
	}

	/* The latest report: the cover tile beside its details. */
	.tp-portal .tp-latest {
		grid-template-columns: minmax(0, 440px) minmax(0, 1fr);
		gap: var(--tp-space-columns);
	}

	.tp-portal .tp-latest-body {
		align-self: center;
	}
}

/* From 1200px: 48px gutters; Overview in two columns, 55 / 45 and 32px
   apart. */
@media (min-width: 1200px) {

	.tp-portal .tp-overview {
		grid-template-columns: minmax(0, 55fr) minmax(0, 45fr);
		grid-template-rows: auto auto 1fr;
		column-gap: var(--tp-space-columns);
	}

	.tp-portal .tp-overview > .tp-intro {
		grid-column: 1;
		grid-row: 1;
	}

	.tp-portal .tp-lead {
		grid-column: 1;
		grid-row: 2;
	}

	.tp-portal .tp-results-col {
		grid-column: 1;
		grid-row: 3;
	}

	/* Its top level with the headline's. */
	.tp-portal .tp-over {
		grid-column: 2;
		grid-row: 2 / 4;
		align-self: start;
		margin-top: 0;
	}
}