/* ==========================================================================
   ZTW Client Area — /clients
   --------------------------------------------------------------------------
   Every colour, font and size here comes from the site's own tokens:
     • --ztw-*            the aliases defined in WP Admin → Appearance → Additional CSS
                          (e.g. --ztw-neon-500: var(--wp--preset--color--custom-neon-500))
     • --wp--preset--*    theme.json presets from the Powder theme (colours, fonts, sizes, spacing)
   The second value in each var() is only a fallback for when the alias is missing.
   Change the tokens in Additional CSS or theme.json and this page follows.

   Class naming: everything starts "ztw-ca-" (client area). Names describe the thing,
   not its look: .ztw-ca-record-number, .ztw-ca-document-link, .ztw-ca-status-badge-complete.
   Sections, top to bottom on the report page:
     .ztw-ca-hero          dark blue band: lime headline and the one-line lede; no cards, no button. Then .ztw-ca-signed-in, a grey strip: signed in as, and a Sign out pill (the contact line moved into the band, 0.9.26).
     .ztw-ca-record-client three platinum cards with the client's figures (collections since, devices collected, CO₂e offset), same style as the logged-out record cards
     .ztw-ca-collections   one grey .ztw-ca-job card per collection: status pill, job number + date/site, CO₂e on the right, items, documents; then .ztw-ca-record-strip, a blue-100 strip with the annual-record download pills
     .ztw-ca-annual        blue-100 band (with How we count below it), company-wide figures by year: title, one line, year pills, four blue-200 metric cards for the chosen year
     .ztw-ca-method        "How we count", a collapsed <details>, one partial on both pages
     .ztw-ca-closing       dark blue band, centred column: lime headline, the one lime button
   Every logged-out page (login, link sent, magic-link landing, coming soon) uses one hero: .ztw-ca-hero-login split in two
   (.ztw-ca-hero-split), text left, one tinted .ztw-ca-notice-card right (the form, the notice or the placeholder). Login and
   coming-soon continue: .ztw-ca-record (three cards), .ztw-ca-figures (three cumulative metric cards), the method, the closing band.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Tokens used on this page (edit the mapping here, not the rules below)
   -------------------------------------------------------------------------- */
.ztw-ca {
	/* Colour */
	--ca-color-band:            var(--ztw-blue-700,           var(--wp--preset--color--primary, #094566));          /* dark blue bands (hero, closing); mockup 16 Sept */
	--ca-color-band-text:       var(--ztw-white,              var(--wp--preset--color--base, #fff));
	--ca-color-band-text-soft:  var(--ztw-blue-200,           var(--wp--preset--color--custom-blue-200, #cfe8f5));  /* secondary text on the bands */
	--ca-color-accent:          var(--ztw-neon-500,           var(--wp--preset--color--custom-neon-500, #ccf656));  /* lime: headlines on dark, buttons, pills */
	--ca-color-accent-hover:    var(--ztw-neon-600,           var(--wp--preset--color--custom-neon-600, #bbe746));
	--ca-color-accent-soft:     var(--ztw-neon-100,           var(--wp--preset--color--custom-neon-100, #f0fccf));  /* pale lime: the line above the headline, soft pills */
	--ca-color-tinted:          var(--ztw-blue-100,           var(--wp--preset--color--custom-blue-100, #eef7fb));  /* light blue cards (figures, notices) */
	--ca-color-tinted-rule:     var(--ztw-blue-200,           var(--wp--preset--color--custom-blue-200, #cfe8f5));
	--ca-color-surface:         var(--ztw-surface-default,    var(--wp--preset--color--white, #fff));               /* white cards */
	--ca-color-page:            var(--ztw-surface-tint1,      var(--wp--preset--color--custom-silver-100, #f8f8f8)); /* page background between bands */
	--ca-color-rule:            var(--ztw-surface-tint2,      var(--wp--preset--color--custom-silver-200, #ededed)); /* hairlines, input borders */
	--ca-color-card-grey:       var(--ztw-surface-tint2,      var(--wp--preset--color--custom-silver-200, #ededed)); /* job cards (Dominic, 17 Sept): grey, black text */
	--ca-color-card-platinum:   var(--ztw-platinum-500,       var(--wp--preset--color--custom-platinum-500, #e2e0df)); /* "What's in your record" cards (Dominic, 24 Sept) */
	--ca-color-icon-client:     var(--ztw-jade-600,           var(--wp--preset--color--custom-jade-600, #1f8756));   /* glyphs on the record cards, both pages (Dominic, 24 Sept) */
	--ca-color-text:            var(--ztw-text-default,       var(--wp--preset--color--contrast, #221f1f));
	--ca-color-text-muted:      var(--ztw-silver-600,         var(--wp--preset--color--custom-silver-700, #717171));
	--ca-color-chip-outline:    var(--ztw-platinum-500,       var(--wp--preset--color--custom-platinum-500, #e2e0df));   /* the outline of an unchosen chip, 1px (Dominic, 23 Oct 2026: platinum-500, not blue) */
	--ca-color-link:            var(--ztw-blue-600,           var(--wp--preset--color--secondary, #0d6898));
	--ca-color-pill-active:     var(--ztw-blue-500,           var(--wp--preset--color--tertiary, #118acb));          /* selected year pill (Dominic, 24 Sept) */
	--ca-color-figure:          var(--ztw-blue-800,           var(--wp--preset--color--custom-blue-800, #042333));  /* big numbers and job numbers on the tinted cards */
	--ca-color-success:         var(--ztw-feedback-success-500, #005c2d);
	--ca-color-success-bg:      var(--ztw-feedback-success-200, #d0ffe7);
	--ca-color-warning:         var(--ztw-feedback-warning-500, #924707);
	--ca-color-warning-bg:      var(--ztw-feedback-warning-200, #fff0e4);
	--ca-color-danger:          var(--ztw-feedback-danger-500,  #930b2d);
	--ca-color-danger-bg:       var(--ztw-feedback-danger-200,  #feecf1);

	/* Type */
	--ca-font-display:          var(--wp--preset--font-family--bebas-neue-pro, "Bebas Neue Pro", "Bebas Neue", Impact, sans-serif);   /* the theme loads weight 700 only: always pair with font-weight 700 and no letter-spacing (0.5.11) */
	--ca-glyph-download:        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3Cpath d='M12 15V3'/%3E%3C/svg%3E");   /* Lucide "download", the family of the site's --ztw-glyph-* icons */
	--ca-glyph-mail:            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='20' height='16' x='2' y='4' rx='2'/%3E%3Cpath d='m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7'/%3E%3C/svg%3E");   /* Lucide "mail" */
	--ca-glyph-people:          url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E");   /* Lucide "users": the "Who can sign in" pill (0.9.43) */
	--ca-glyph-close:           url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18'/%3E%3Cpath d='m6 6 12 12'/%3E%3C/svg%3E");   /* Lucide "x": the dialogs' close button (0.9.47) */
	--ca-glyph-check:           url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");   /* Lucide "check": a done step in the enquiry tracker (0.10.1) */
	--ca-glyph-check-circle:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50'%3E%3Cpath fill='none' stroke='%23000' stroke-width='1' stroke-miterlimit='10' d='M25 49C38.2346 49 49 38.3113 49 25.0495C49 11.7876 38.2346 1 25 1C11.7654 1 1 11.7876 1 25.0495C1 38.3113 11.6667 49 25 49ZM18.4815 37.2227H18.284C17.6914 37.2227 17.0988 36.8268 16.7037 36.332L9.2963 26.9299C8.50617 25.9402 8.7037 24.4557 9.69136 23.6639C10.679 22.8722 12.1605 23.0701 12.9506 24.0598L18.7778 31.4825L37.2469 15.5485C38.2346 14.6577 39.716 14.8557 40.5062 15.7464C41.3951 16.7361 41.1975 18.2206 40.3086 19.0124L19.963 36.5299C19.5679 36.9258 18.9753 37.1237 18.4815 37.1237V37.2227Z'/%3E%3C/svg%3E");   /* Dominic's tick-in-a-circle (26 Oct 2026), a mask, outlined as drawn, a 1-unit stroke on the 50-unit box = about 1px as rendered (0.11.19) */
	--ca-glyph-sign-out:        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m16 17 5-5-5-5'/%3E%3Cpath d='M21 12H9'/%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/%3E%3C/svg%3E");   /* Lucide "log-out" */
	--ca-font-body:             var(--wp--preset--font-family--open-sans, "Open Sans", Helvetica, Arial, sans-serif);
	--ca-size-page-title:       clamp(48px, 3rem + 1.5vw, 68px);          /* a step above the theme's custom-2 (54px), per Dominic's screenshot 16 Sept evening */
	--ca-size-section-title:    var(--wp--preset--font-size--x-large, clamp(24px, 1.5rem + ((1vw - 6.4px) * .938), 30px));   /* the theme's h2 size */
	--ca-size-stat-number:      var(--wp--preset--font-size--custom-2, clamp(56px, 3.5rem + ((1vw - 6.4px) * 2.5), 72px));
	--ca-size-job-number:       clamp(40px, 2.25rem + 1vw, 48px);        /* job number and its CO₂ figure: a step below the hero figures */
	--ca-size-display-small:    clamp(20px, 1.15rem + .5vw, 24px);       /* date · site under the job number, "CO₂ offset", the unit under an annual figure */
	--ca-size-lede:             var(--wp--preset--font-size--medium, clamp(16px, 1rem + ((1vw - 6.4px) * .313), 18px));
	--ca-size-body:             var(--wp--preset--font-size--normal, 16px);
	--ca-size-small:            var(--wp--preset--font-size--small, clamp(14px, .875rem + ((1vw - 6.4px) * .313), 16px));
	--ca-size-tiny:             var(--wp--preset--font-size--x-small, 14px);

	/* Layout */
	--ca-width:                 var(--wp--style--global--wide-size, 1400px);      /* same as the theme's "wide" alignment */
	--ca-gutter:                var(--wp--style--root--padding-left, var(--wp--preset--spacing--40, 30px));
	--ca-space-section:         var(--wp--preset--spacing--60, clamp(40px, 6vw, 60px));   /* vertical padding of each section */
	--ca-space-band:            var(--wp--preset--spacing--70, clamp(50px, 7vw, 70px));   /* vertical padding of the dark bands */
	--ca-space-card:            var(--wp--preset--spacing--30, clamp(25px, 3vw, 30px));   /* inside cards */
	--ca-space-gap:             var(--wp--preset--spacing--20, clamp(15px, 2vw, 20px));   /* between cards */
	--ca-radius:                8px;
	--ca-shadow:                var(--wp--preset--shadow--light, 0 0 10px rgba(0, 0, 0, .1));

	font-family: var(--ca-font-body);
	font-size: var(--ca-size-body);
	color: var(--ca-color-text);
	background: var(--ca-color-surface);   /* white between the bands */
	line-height: 1.55;
}


/* --------------------------------------------------------------------------
   2. Layout: sections and the centred container
   -------------------------------------------------------------------------- */
.wp-site-blocks > main.ztw-ca { margin-block-start: 0; }   /* the theme gives every child of the site wrapper a top margin (:where(.wp-site-blocks) > *), which showed as a grey strip between the header and the hero (Dominic, 24 Sept) */
.ztw-ca-container { max-width: var(--ca-width); margin-inline: auto; padding-inline: var(--ca-gutter); box-sizing: content-box; }   /* content-box: the same maths as the theme's alignwide, so text lines up with the header logo and footer headline */
.ztw-ca-section   { padding-block: var(--ca-space-section); }
.ztw-ca-section-intro { margin: 0 0 var(--ca-space-card); text-wrap: pretty; }


/* --------------------------------------------------------------------------
   3. Type
   -------------------------------------------------------------------------- */
.ztw-ca-hero-topline { font-size: var(--ca-size-tiny); margin: 0 0 14px; color: var(--ca-color-accent-soft); }   /* small line above the headline: "Signed in as: email · Sign out" on the report, "Client area" on the login and landing pages */
.ztw-ca-hero-topline a { color: inherit; font-weight: 700; }
.ztw-ca-hero-topline .ztw-ca-separator { color: inherit; }
.ztw-ca-page-title    { font-family: var(--ca-font-display); font-weight: 700; font-size: var(--ca-size-page-title); line-height: .85; margin: 0 0 12px; text-wrap: balance; }
.ztw-ca-page-title-accent, .ztw-ca-section-title-accent { color: var(--ca-color-accent); }   /* lime headline on a dark band */
.ztw-ca-section-title { font-family: var(--ca-font-display); font-weight: 700; font-size: var(--ca-size-section-title); line-height: .85; margin: 0 0 14px; text-wrap: balance; }   /* = the theme's h2 */
.ztw-ca-card-title    { font-family: var(--ca-font-body); font-size: var(--ca-size-lede); font-weight: 700; line-height: 1; margin: 0; }   /* the theme's headings are line-height .85 for Bebas; this one is Open Sans (Dominic, 24 Sept: 1) */
.ztw-ca-lede          { margin: 0; font-size: var(--ca-size-body); text-wrap: pretty; }
.ztw-ca-small-print   { color: var(--ca-color-text-muted); font-size: var(--ca-size-small); margin: 14px 0 0; text-wrap: pretty; }
.ztw-ca-separator     { color: var(--ca-color-text-muted); margin-inline: .35em; }   /* the " · " between inline facts */
.ztw-ca-pill { display: inline-block; background: var(--ca-color-accent); color: var(--ca-color-text); font-size: var(--ca-size-tiny); font-weight: 600; padding: 4px 10px; border-radius: 6px; }
.ztw-ca-pill-soft { background: var(--ca-color-accent-soft); font-weight: 500; }   /* pale: "Provisional figures" */
/* Plain links keep the theme's own link colour (theme.json: secondary); only exceptions are styled below. */


/* --------------------------------------------------------------------------
   4. Hero band (dark blue): lime headline, one-line intro
   -------------------------------------------------------------------------- */
.ztw-ca-hero { background: var(--ca-color-band); color: var(--ca-color-band-text); padding-block: var(--ca-space-band) var(--ca-space-section); }
.ztw-ca-hero .ztw-ca-lede { color: var(--ca-color-band-text); }   /* white, per the wireframe */
.ztw-ca-hero .ztw-ca-lede a { color: var(--ca-color-band-text); }   /* the contact address */
.ztw-ca-hero .ztw-ca-lede + .ztw-ca-lede { margin-top: 10px; }   /* "Need a certificate reissued…", a second paragraph in the band since 0.9.26 (in the grey strip before) */
.ztw-ca-hero-footnote { margin: var(--ca-space-card) 0 0; font-size: var(--ca-size-small); color: var(--ca-color-band-text-soft); text-wrap: pretty; }
.ztw-ca-hero-login { padding-block: var(--ca-space-band); }   /* the login page's version of the band */

/* --------------------------------------------------------------------------
   5. Cards (login form, notices)
   -------------------------------------------------------------------------- */
.ztw-ca-card        { background: var(--ca-color-surface); border-radius: var(--ca-radius); padding: var(--ca-space-card); }
.ztw-ca-card-tinted { background: var(--ca-color-tinted); }


/* --------------------------------------------------------------------------
   6. Collections: one tinted card per job
   -------------------------------------------------------------------------- */
.ztw-ca-job { background: var(--ca-color-card-grey); color: var(--ca-color-text); border-radius: var(--ca-radius); padding: var(--ca-space-card); }
.ztw-ca-job + .ztw-ca-job { margin-top: var(--ca-space-card); }
.ztw-ca-job-header   { display: grid; gap: 16px; justify-items: start; }   /* the headline row; the status pill ends the meta line (Dominic, 30 Sept) */
.ztw-ca-job-headline { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px 24px; width: 100%; }
.ztw-ca-job-number { font-family: var(--ca-font-display); font-weight: 700; font-size: var(--ca-size-job-number); line-height: .95; margin: 0; color: var(--ca-color-text); }
.ztw-ca-job-meta   { margin: 6px 0 0; font-family: var(--ca-font-display); font-weight: 700; font-size: var(--ca-size-display-small); line-height: 1; }   /* date · site, under the job number */
.ztw-ca-job-carbon { display: grid; justify-items: end; text-align: right; margin-left: auto; }   /* the job's CO₂ figure, right, level with the job number */
.ztw-ca-job-carbon-number { font-family: var(--ca-font-display); font-weight: 700; font-size: var(--ca-size-job-number); line-height: .95; color: var(--ca-color-text); }
.ztw-ca-job-carbon-label  { font-family: var(--ca-font-display); font-weight: 700; font-size: var(--ca-size-display-small); line-height: 1; margin-top: 6px; }
.ztw-ca-job-note   { margin: 12px 0 0; font-size: var(--ca-size-small); color: var(--ca-color-text-muted); }

/* Status badge: Booked / Collected: processing / Complete: reporting ready */
.ztw-ca-status-badge { display: inline-block; font-size: var(--ca-size-tiny); font-weight: 500; padding: 4px 10px; border-radius: 6px; white-space: nowrap; }
.ztw-ca-job-meta .ztw-ca-status-badge { font-family: var(--ca-font-body); line-height: 1.2; vertical-align: middle; margin-left: 8px; }   /* at the end of the date · site · weight line, in the body face */
.ztw-ca-status-badge-complete   { background: var(--ca-color-accent); color: var(--ca-color-text); }
.ztw-ca-status-badge-processing { background: var(--ztw-neon-100, var(--wp--preset--color--custom-neon-100, #f0fccf)); color: var(--ca-color-text); }
.ztw-ca-status-badge-certifying { background: var(--ztw-neon-100, var(--wp--preset--color--custom-neon-100, #f0fccf)); color: var(--ca-color-text); }
.ztw-ca-status-badge-booked, .ztw-ca-status-badge-arranging { background: var(--ca-color-surface); color: var(--ca-color-text); }
.ztw-ca-badge-enhanced { background: var(--ztw-neon-200, var(--wp--preset--color--custom-neon-200, #e2fa9e)); color: var(--ca-color-text); }   /* "Enhanced data destruction" chip before the status chip (0.9.41) */

/* What was collected: "10  Laptops  note ........ EWC 20 01 36" */
.ztw-ca-item-list { list-style: none; margin: 14px 0 0; padding: 12px 0 0; border-top: 1px solid var(--ca-color-surface); display: grid; gap: 4px; font-size: var(--ca-size-small); }
.ztw-ca-document-heading + .ztw-ca-item-list { margin-top: 8px; padding-top: 0; border-top: 0; }   /* under its "Items summary" heading the rule and gap are the heading's (Dominic, 30 Sept) */
.ztw-ca-item-list li { display: grid; grid-template-columns: 2.4em 1fr auto; gap: 6px 10px; align-items: baseline; }
.ztw-ca-item-list b     { font-variant-numeric: tabular-nums; }                         /* quantity */
.ztw-ca-item-list em    { color: var(--ca-color-text-muted); font-style: normal; margin-left: .5em; }   /* item note */
.ztw-ca-item-list small { color: var(--ca-color-text-muted); font-size: var(--ca-size-tiny); white-space: nowrap; }   /* EWC code, right */

/* Sample-document note on a client preview (0.9.35): a native dialog in the card's face; the sample opens from its link */
.ztw-ca-dialog { width: calc(100% - 2 * var(--ca-gutter)); max-width: 32rem; margin: auto; padding: var(--ca-space-card); border: 0; border-radius: var(--ca-radius); background: var(--ca-color-surface); color: var(--ca-color-text); font-family: var(--ca-font-body); font-size: var(--ca-size-body); line-height: 1.5; box-shadow: 0 12px 40px rgba(0, 0, 0, .25); }
.ztw-ca-dialog::backdrop { background: rgba(4, 35, 51, .6); }
.ztw-ca-dialog-title { margin: 0 0 8px; padding-right: 44px; font-family: var(--ca-font-display); font-weight: 700; font-size: var(--ca-size-display-small); line-height: 1; }   /* room for the [X] */
/* Every dialog closes by an [X] top right (0.9.47; Dominic: the members dialog's Close link sat right next to Add), Escape, or a click on the backdrop. A form method=dialog button needs no script. */
.ztw-ca-dialog-x { margin: 0; }   /* the members dialog's own method=dialog form; the preview dialogs' button sits in their wrapping form */
.ztw-ca-dialog-x-button { position: absolute; top: 10px; right: 10px; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--ca-color-text-muted); cursor: pointer; }
.ztw-ca-dialog-x-button:hover { background: var(--ca-color-tinted-rule); color: var(--ca-color-text); }
.ztw-ca-dialog-x-button:focus-visible { outline: 3px solid var(--ca-color-accent); outline-offset: 2px; }
.ztw-ca-dialog-x-glyph { width: 20px; height: 20px; background: currentColor; -webkit-mask: var(--ca-glyph-close) center / contain no-repeat; mask: var(--ca-glyph-close) center / contain no-repeat; }
.ztw-ca-dialog p { margin: 0; }
.ztw-ca-dialog-actions { display: flex; flex-wrap: wrap; gap: 20px; align-items: baseline; margin-top: 16px; }
/* "Who can sign in" (0.9.43): the original login's list of added emails, each with a Remove, and the add form; the same dialog shell as the preview notes. */
.ztw-ca-members-list { list-style: none; margin: 16px 0 0; padding: 0; border-top: 1px solid var(--ca-color-tinted-rule); }
.ztw-ca-members-list li { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--ca-color-tinted-rule); overflow-wrap: anywhere; }
.ztw-ca-members-list form { margin: 0; flex: none; }
.ztw-ca-members-add { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.ztw-ca-members-add .ztw-ca-pill-button { align-self: flex-start; }
.ztw-ca-dialog .ztw-ca-alert-error, .ztw-ca-dialog .ztw-ca-members-note { margin-top: 12px; }
.ztw-ca-members-note { padding: 10px 12px; border-radius: 6px; background: var(--ca-color-tinted-rule); font-size: var(--ca-size-small); }
.ztw-ca-dialog-close { background: none;   /* the members list's Remove links (was also the text Close until 0.9.47) */ border: 0; padding: 0; font: inherit; color: var(--ca-color-text-muted); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* Documents: WTN, Certificate of destruction, carbon certificate, erasure reports */
.ztw-ca-document-heading { margin: 14px 0 0; padding: 12px 0 0; border-top: 1px solid var(--ca-color-surface); font-family: var(--ca-font-body); font-weight: 600; font-size: var(--ca-size-small); line-height: 1.4; }   /* "Items summary", "Where it went, by weight", "Certificates": the card's own face and size, bold (Open Sans 600, the only bold loaded) (Dominic, 13 Oct); was the display face at the date · site size (30 Sept); no letter-spacing, ever (24 Sept) */
.ztw-ca-document-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; }
.ztw-ca-document { display: grid; grid-template-columns: 20px 1fr auto; gap: 10px; align-items: center; font-size: var(--ca-size-small); }
.ztw-ca-document-icon { width: 20px; height: 20px; color: var(--ca-color-link); }
.ztw-ca-document-pending, .ztw-ca-document-pending .ztw-ca-document-icon { color: var(--ca-color-text-muted); }
.ztw-ca-document-meta { font-size: var(--ca-size-tiny); color: var(--ca-color-text-muted); white-space: nowrap; }   /* date · PDF · size */
.ztw-ca-document-link { font-weight: 700; color: var(--ca-color-link); text-decoration: underline; text-underline-offset: 3px; }
.ztw-ca-document-link:hover { color: var(--ca-color-band); }
.ztw-ca-document-heading-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 14px 0 0; padding: 12px 0 0; border-top: 1px solid var(--ca-color-surface); }   /* "CERTIFICATES" left, "Download all documents (zip)" right */
.ztw-ca-document-heading-row .ztw-ca-document-heading { margin: 0; padding: 0; border: 0; }
.ztw-ca-document-all { font-size: var(--ca-size-tiny); font-weight: 700; color: var(--ca-color-link); text-decoration: underline; text-underline-offset: 3px; }
.ztw-ca-record-strip { margin-top: var(--ca-space-card); padding: 20px var(--ca-space-card); background: var(--ca-color-tinted); border-radius: var(--ca-radius); }   /* the annual-record downloads, a blue-100 strip closing the job list (Dominic, 1 Oct 2026; under the section intro before) */
.ztw-ca-record-strip-text { margin: 0 0 12px; text-wrap: pretty; }
.ztw-ca-record-downloads { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }   /* a pill per year, on their own line under the sentence (pills: Dominic, 25 Sept 2026; own line: 30 Sept) */


/* --------------------------------------------------------------------------
   7. Figures (handoff 24 Sept 2026). One metric-card style, two settings:
      .ztw-ca-figures  logged out, cumulative: blue-100 band, blue-200 cards, blue-700 text, three across
      .ztw-ca-annual   signed in, by year: grey band, blue-200 cards, black text, four across, a tab strip above
      .ztw-ca-record   logged out, "What's in your record": white band, three platinum-500 text cards with an icon above each title
   -------------------------------------------------------------------------- */
.ztw-ca-figures-updated { margin: var(--ca-space-card) 0 0; font-size: var(--ca-size-small); color: var(--ca-color-text-muted); }   /* "Updated 24 September 2026 · 2026 provisional until year end": last paragraph of both figures bands */
.ztw-ca-small-print + .ztw-ca-figures-updated, .ztw-ca-figures .ztw-ca-small-print + .ztw-ca-small-print, .ztw-ca-annual .ztw-ca-small-print + .ztw-ca-small-print { margin-top: 10px; }
.ztw-ca-certificate { margin-top: var(--ca-space-gap); background: var(--ca-color-tinted-rule); color: var(--ca-color-figure); border-radius: var(--ca-radius); padding: var(--ca-space-card); display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 440px); gap: var(--ca-space-card); align-items: center; }   /* the carbon offset certificate panel (Dominic's wireframe, 24 Sept): blue-200, blue-800 text, thumbnail right */
.ztw-ca-certificate-text { display: grid; gap: 16px; justify-items: start; }   /* one gap between title, paragraphs and links */
.ztw-ca-certificate-title { margin: 0; font-family: var(--ca-font-display); font-weight: 700; font-size: var(--ca-size-job-number); line-height: .95; color: inherit; }
.ztw-ca-certificate-text p { margin: 0; text-wrap: pretty; }
.ztw-ca-certificate-link { font-weight: 700; margin: 0; }
.ztw-ca-certificate-link + .ztw-ca-certificate-link { margin-top: -6px; }   /* the two links sit closer than the paragraphs */
.ztw-ca-certificate-link a { color: inherit; }
.ztw-ca-certificate-thumb { display: block; justify-self: end; }
.ztw-ca-certificate-thumb img { display: block; width: 100%; height: auto; border-radius: 4px; box-shadow: 0 2px 10px rgba(0, 0, 0, .12); }
.ztw-ca-metric-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ca-space-gap); }
.ztw-ca-metric-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ztw-ca-metric-card { background: var(--ca-color-tinted-rule); color: var(--ca-color-figure); border-radius: var(--ca-radius); padding: var(--ca-space-card) var(--ca-space-gap); display: grid; gap: 6px; align-content: start; }   /* blue-200 on the blue-100 band, blue-800 text on both pages, the same as the certificate panel below (Dominic, 24 Sept and 1 Oct: the logged-out cards were blue-700) */
.ztw-ca-metric-number { font-family: var(--ca-font-display); font-weight: 700; font-size: var(--ca-size-stat-number); line-height: .95; color: inherit; font-variant-numeric: tabular-nums; }
.ztw-ca-metric-label { font-family: var(--ca-font-display); font-weight: 700; font-size: var(--ca-size-display-small); line-height: 1; }   /* "Items reused", "Kept out of landfill": same face as the "against … produced" line (Dominic, 24 Sept) */
.ztw-ca-metric-text { margin: 8px 0 0; font-size: var(--ca-size-small); text-wrap: pretty; }
.ztw-ca-metric-text a { color: inherit; font-weight: 700; }
.ztw-ca-figures { background: var(--ca-color-tinted); }   /* blue-100 band, continued by "How we count" below it (Dominic, 24 Sept) */
.ztw-ca-figures .ztw-ca-section-intro { max-width: none; }
.ztw-ca-figures .ztw-ca-small-print { margin-top: var(--ca-space-card); }   /* "Clients who sign in see these figures year by year…" */

.ztw-ca-record { background: var(--ca-color-surface); }   /* white, with its own bottom padding as the gap above the blue figures band (Dominic, 24 Sept) */
.ztw-ca-record-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ca-space-gap); }
.ztw-ca-record-card { background: var(--ztw-jade-100, var(--wp--preset--color--custom-jade-100, #e5f6ee)); /* jade-100 on both pages (Dominic, 30 Sept; was platinum) */ color: var(--ca-color-text); border-radius: var(--ca-radius); padding: var(--ca-space-card); display: grid; gap: 10px; align-content: start; }
.ztw-ca-record-icon { width: 48px; height: 48px; margin-bottom: 4px; display: block; }   /* media-library image, or a glyph below */
.ztw-ca-record-glyph { background: currentColor; color: var(--ca-color-icon-client);   /* jade-600 on both pages (Dominic, 24 Sept evening; was the muted text colour when logged out) */ -webkit-mask: var(--ztw-glyph, none) center / contain no-repeat; mask: var(--ztw-glyph, none) center / contain no-repeat; }   /* the site's Lucide masks from the Additional CSS */
.ztw-ca-record-glyph-van  { --ztw-glyph: var(--ztw-glyph-van); }
.ztw-ca-record-glyph-file { --ztw-glyph: var(--ztw-glyph-file); }
.ztw-ca-record-glyph-leaf { --ztw-glyph: var(--ztw-glyph-leaf); }
.ztw-ca-record-glyph-package { --ztw-glyph: var(--ztw-glyph-package); }
/* Signed in: the same cards carry the client's figures (collections since, devices, CO₂e offset) */
.ztw-ca-record-client { padding-bottom: 0; }
.ztw-ca-upcoming { padding-bottom: 0; }   /* "Your next collection": jobs not yet collected, between the three cards and "Your collections" (0.9.26; above the cards before) */
.ztw-ca-upcoming .ztw-ca-job { background: var(--ca-color-tinted); }   /* blue-100, as the annual-record strip (Dominic, 5 Oct 2026) */
.ztw-ca-job-ask { margin: 14px 0 0; }
.ztw-ca-record-number { font-family: var(--ca-font-display); font-weight: 700; font-size: var(--ca-size-stat-number); line-height: .95; color: var(--ca-color-text); font-variant-numeric: tabular-nums; }
.ztw-ca-record-number small { font-size: .4em; }
.ztw-ca-record-text { margin: 0; font-size: var(--ca-size-small); line-height: 1.4; text-wrap: pretty; }
.ztw-ca-record-link { margin: 0; font-size: var(--ca-size-small); font-weight: 700; }

.ztw-ca-annual { background: var(--ca-color-tinted); }   /* blue-100 band, continued by "How we count" below it (Dominic, 24 Sept) */
.ztw-ca-year-note { margin: 0 0 var(--ca-space-gap); font-size: var(--ca-size-small); color: var(--ca-color-text-muted); }
/* Year pills: blue-100 chips with blue-700 text; the chosen year blue-500 with white text (Dominic, 24 Sept) */
.ztw-ca-year-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 var(--ca-space-card); }
.ztw-ca-year-tab { font: inherit; font-size: var(--ca-size-small); font-weight: 600; line-height: 1.2; padding: 7px 16px; border: 0; border-radius: 999px; background: var(--ca-color-tinted-rule); color: var(--ca-color-band); cursor: pointer; }   /* blue-200, blue-700 text */
.ztw-ca-year-tab:hover { color: var(--ca-color-figure); text-decoration: underline; text-underline-offset: 3px; }
.ztw-ca-year-tab[aria-selected="true"] { background: var(--ca-color-pill-active); color: var(--ca-color-band-text); }   /* blue-500, white text */
.ztw-ca-year-tab:focus-visible { outline: 3px solid var(--ca-color-accent); outline-offset: 2px; }
.ztw-ca-metric-note { margin: 10px 0 0; font-size: var(--ca-size-tiny); color: var(--ca-color-text-muted); }   /* carbon card: "Reported per year. Total since …" (Dominic, 25 Sept) */

/* The annual-record pills, year-tab style */
.ztw-ca-record-pill, .ztw-ca-pill-button { font-size: var(--ca-size-small); font-weight: 600; line-height: 1.2; display: inline-flex; align-items: center; gap: 7px; padding: 7px 16px 7px 13px; border-radius: 999px; background: var(--ca-color-tinted-rule); color: var(--ca-color-band); text-decoration: none; }
.ztw-ca-record-pill-glyph { width: 16px; height: 16px; flex: none; background: currentColor; -webkit-mask: var(--ca-glyph-download) center / contain no-repeat; mask: var(--ca-glyph-download) center / contain no-repeat; }   /* "[⤓ Download 2026]": Lucide download, stroke 2, same family as the site's --ztw-glyph-* set (Dominic, 30 Sept) */
.ztw-ca-record-pill:hover, .ztw-ca-pill-button:hover { background: var(--ca-color-pill-active); color: var(--ca-color-band-text); }
.ztw-ca-record-pill:focus-visible, .ztw-ca-pill-button:focus-visible { outline: 3px solid var(--ca-color-accent); outline-offset: 2px; }
.ztw-ca-pill-button-glyph { width: 16px; height: 16px; flex: none; background: currentColor; -webkit-mask: center / contain no-repeat; mask: center / contain no-repeat; }   /* .ztw-ca-pill-button is the same pill for anything that is not a download ("[✉ Ask a question about this collection]", "[→ Sign out]"): the download script listens for .ztw-ca-record-pill, so that class stays for downloads only (0.9.26) */
.ztw-ca-pill-button-glyph-mail { -webkit-mask-image: var(--ca-glyph-mail); mask-image: var(--ca-glyph-mail); }
.ztw-ca-pill-button-glyph-sign-out { -webkit-mask-image: var(--ca-glyph-sign-out); mask-image: var(--ca-glyph-sign-out); }
.ztw-ca-pill-button-glyph-people { -webkit-mask-image: var(--ca-glyph-people); mask-image: var(--ca-glyph-people); }
button.ztw-ca-pill-button { border: 0; font-family: inherit; cursor: pointer; }   /* the pill as a <button>: "Who can sign in" opens a dialog (0.9.43) */
.ztw-ca-year-heading { font-family: var(--ca-font-display); font-weight: 700; font-size: var(--ca-size-display-small); line-height: 1; margin: 0 0 var(--ca-space-gap); color: var(--ca-color-figure); }   /* the year, shown only when the pills are not (no scripting) */
.ztw-ca-annual-tabbed .ztw-ca-year-heading { display: none; }
.ztw-ca-year-panel:not([hidden]) + .ztw-ca-year-panel:not([hidden]) { margin-top: var(--ca-space-section); }   /* stacked years without scripting; a hidden first panel must not push the visible one down */
.ztw-ca-annual .ztw-ca-small-print { margin-top: var(--ca-space-card); }

/* "How we count": the method note, collapsed by default; #how-we-count is linked from the figures and the sustainability page */
.ztw-ca-method-section { padding-top: 0; background: var(--ca-color-tinted); }   /* same blue-100 as the figures band above it: one block */
.ztw-ca-method { border-top: 1px solid var(--ca-color-tinted-rule); border-bottom: 1px solid var(--ca-color-tinted-rule); scroll-margin-top: 120px; }
.ztw-ca-method-summary { list-style: none; cursor: pointer; padding: var(--ca-space-gap) 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.ztw-ca-method-summary::-webkit-details-marker { display: none; }
.ztw-ca-method-summary .ztw-ca-section-title { margin: 0; }
.ztw-ca-method-summary::after { content: ""; width: 12px; height: 12px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); margin-right: 6px; flex: none; transition: transform .15s; }
.ztw-ca-method[open] .ztw-ca-method-summary::after { transform: rotate(-135deg); margin-top: 6px; }
.ztw-ca-method-body { padding-bottom: var(--ca-space-card); }
.ztw-ca-method-body p { margin: 0 0 14px; text-wrap: pretty; }
.ztw-ca-method-heading { font-family: var(--ca-font-body); font-size: var(--ca-size-body); font-weight: 700; margin: 20px 0 6px; }
.ztw-ca-method-footer { font-size: var(--ca-size-small); color: var(--ca-color-text-muted); padding-top: 12px; border-top: 1px solid var(--ca-color-tinted-rule); }


/* --------------------------------------------------------------------------
   8. Login page: the form, and the "check your inbox" notice
   -------------------------------------------------------------------------- */
.ztw-ca-login-form { gap: 10px; }   /* the panel as a form: label, input, button, note */
.ztw-ca-field-label { font-size: var(--ca-size-small); font-weight: 700; }
.ztw-ca-field-input { font: inherit; font-size: var(--ca-size-lede); padding: 13px 14px; border: 2px solid var(--ca-color-tinted-rule); border-radius: 6px; width: 100%; box-sizing: border-box; background: var(--ca-color-surface); color: var(--ca-color-text); }
.ztw-ca-field-input:focus { outline: 3px solid var(--ca-color-accent); outline-offset: 1px; border-color: var(--ca-color-band); }
.ztw-ca-form-note   { font-size: var(--ca-size-small); color: var(--ca-color-text-muted); margin: 4px 0 0; }   /* "single-use link, 15 minutes" */
.ztw-ca-alert-error { background: var(--ca-color-danger-bg); color: var(--ca-color-danger); padding: 10px 12px; border-radius: 6px; font-size: var(--ca-size-small); margin: 0; }
.ztw-ca-honeypot    { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }   /* bot trap, never shown */
.ztw-ca-notice-alt { margin: 6px 0 0; font-size: var(--ca-size-tiny); }   /* "Use a different email address": deliberately quiet */
.ztw-ca-notice-alt a { color: var(--ca-color-text-muted); }
.ztw-ca-notice-alt-ruled { margin-top: var(--ca-space-gap); padding-top: var(--ca-space-gap); border-top: 1px solid var(--ca-color-rule); }   /* the thank-you page's "Already a customer?" line under a rule, the question in bold (0.11.20) */
.ztw-ca-notice-alt-ruled strong { font-weight: 600; }
.ztw-ca-hero-login .ztw-ca-small-print a { color: var(--ca-color-band-text); }   /* "Not a client yet?" on the dark band */

/* The logged-out hero (mockup 17 Sept 2026): text on the left, one tinted panel on the right */
.ztw-ca-hero-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--ca-space-section); align-items: center; }
.ztw-ca-notice-card { color: var(--ca-color-text); display: grid; gap: 14px; align-self: center; }   /* the one panel: form, notice or placeholder */
.ztw-ca-notice-card .ztw-ca-card-title { padding-bottom: 12px; border-bottom: 1px solid var(--ca-color-tinted-rule); }
.ztw-ca-notice-body { margin: 0; text-wrap: pretty; }   /* no width cap: the phone number stays on one line */
.ztw-ca-notice-card .ztw-ca-button { justify-self: start; cursor: pointer; }

/* Magic-link landing, after "Open your impact record" is pressed: the button gives way to this line while the account
   lookup and the report build run (the browser keeps the page up until the report arrives). Spinner is a ring in the
   link blue; reduced motion gets a still dotted ring (section 11). */
.ztw-ca-progress { display: flex; align-items: center; gap: 10px; margin: 0; font-size: var(--ca-size-small); color: var(--ca-color-text); }
.ztw-ca-progress[hidden] { display: none; }
.ztw-ca-download-progress { position: fixed; z-index: 50; left: 50%; bottom: 20px; transform: translateX(-50%); max-width: calc(100vw - 32px); padding: 12px 18px; border-radius: 6px; background: #fff; box-shadow: 0 4px 18px rgba(0, 0, 0, .18); }   /* zip downloads, 0.7.7: stays in view wherever the link was */
.ztw-ca-notice-card .ztw-ca-button[hidden] { display: none; }   /* the theme's display on .wp-element-button would otherwise beat the hidden attribute */
.ztw-ca-spinner { flex: none; width: 20px; height: 20px; border-radius: 50%; border: 3px solid var(--ca-color-tinted-rule); border-top-color: var(--ca-color-link); animation: ztw-ca-spin .8s linear infinite; }
@keyframes ztw-ca-spin { to { transform: rotate(360deg); } }


/* --------------------------------------------------------------------------
   9. Buttons: the theme's own. Markup copies the homepage (wp-block-buttons > wp-block-button > .wp-element-button,
   6px radius inline), so theme.json styles them: neon-500, Bebas, uppercase, 15px 30px. Nothing here restyles them.
   -------------------------------------------------------------------------- */
/* The booking form in the closing band. It carries the site's own .ztw-form class (Additional CSS), which is what styles the form
   on the /where/ pages: lime display-face labels, white fields, pale help text, on the theme's primary blue. Nothing here restyles
   the form; this only places it (Dominic, 29 Sept 2026: the white card of 0.9.0 was wrong). */
.ztw-ca-closing-has-form .ztw-ca-lede { max-width: none; }   /* beside the full-width form the 60ch measure looked cut short (Dominic, 29 Sept 2026) */
.ztw-ca-callout { background: var(--ca-color-tinted); color: var(--ca-color-figure); border-radius: 6px; padding: 14px 18px; margin: 0; font-size: var(--ca-size-body); line-height: 1.5; font-weight: 600; text-align: left; }
.ztw-ca-booking { background: var(--wp--preset--color--primary); margin-top: 24px; max-width: 720px; text-align: left; }
.ztw-ca-button:focus-visible { outline: 3px solid var(--ca-color-band-text); outline-offset: 2px; }   /* visible focus on the dark band */


/* --------------------------------------------------------------------------
   10. Closing band (dark blue): the one call to action
   -------------------------------------------------------------------------- */
.ztw-ca-closing { background: var(--ca-color-band); color: var(--ca-color-band-text); padding-block: var(--ca-space-band); scroll-margin-top: 120px; }   /* room for the site header when jumped to */
.ztw-ca-closing-column { max-width: 720px; }   /* narrower, centred column (the booking form will sit in it); the container's own margin-inline: auto centres it */
.ztw-ca-closing .ztw-ca-lede { margin-bottom: var(--ca-space-card); color: var(--ca-color-band-text); }
.ztw-ca-signed-in { margin: 0; padding: 12px 0; font-size: var(--ca-size-tiny); color: var(--ca-color-text); text-align: center; background: var(--ca-color-page); }   /* centred, default text colour: muted grey was too subtle (Dominic, 30 Sept) */   /* light grey strip directly under the hero: who is signed in, sign out, the contact address (Dominic, 24 Sept) */
.ztw-ca-signed-in p { margin-block: 0; }   /* block only: margin: 0 was cancelling the container's margin-inline: auto, so the line sat off-centre */
.ztw-ca-signed-in .ztw-ca-pill-button { margin-left: 10px; vertical-align: middle; }   /* "Sign out" as a pill after the name (0.9.26) */
.ztw-ca-admin-view { margin: 0; padding: 12px 0; font-size: var(--ca-size-small); font-weight: 600; color: var(--ca-color-warning); background: var(--ca-color-warning-bg); text-align: center; }   /* an administrator viewing the Hub as a client (0.9.28): a warning strip above the hero, same shape as .ztw-ca-signed-in */
.ztw-ca-admin-view p { margin-block: 0; }
.ztw-ca-admin-view .ztw-ca-pill-button { margin-left: 10px; vertical-align: middle; }


/* --------------------------------------------------------------------------
   10b. "Start your enquiry" workspace (0.10.0, includes/enquiry.php; reframed 0.10.1, chips outlined 0.10.2): .ztw-ca-enq
   The Client Hub's own frame (Dominic, 23 Oct 2026): the dark band (.ztw-ca-hero) with the lime title, the two-minute
   promise, a line saying whose enquiry it is, and the step tracker along the band's foot; the step itself is one white
   .ztw-ca-card on the grey page. Fields reuse .ztw-ca-field-label/-input; the chips are the year pills (.ztw-ca-year-tab: blue-200
   at rest, underline on hover, blue-500 with white text when chosen) as real checkboxes and radios inside a label; one lime
   button per view (Continue, or Send). The second WPForms form on step 4 is drawn whole and hidden field by field, except
   the newsletter tick (.ztw-ca-enq-visible, a class the plugin adds) and any field WPForms marks with an error.
   -------------------------------------------------------------------------- */
.ztw-ca-enq-hero { padding-block: var(--ca-space-band) 0; }
.ztw-ca-enq-who { margin: 6px 0 0; font-size: var(--ca-size-small); color: var(--ca-color-band-text-soft); }   /* close under the promise line (Dominic, 23 Oct 2026) */
.ztw-ca-enq-who strong { color: inherit; font-weight: 600; }   /* the company in the same soft blue as the address: two colours on one line jarred (Dominic, 23 Oct 2026) */
.ztw-ca-enq-steps { list-style: none; margin: var(--ca-space-card) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 32px; }
.ztw-ca-enq-step { display: flex; align-items: center; gap: 10px; padding: 14px 0; font-size: var(--ca-size-small); color: var(--ca-color-band-text-soft); border-bottom: 3px solid transparent; }
.ztw-ca-enq-step a { display: flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; }
.ztw-ca-enq-step a:hover .ztw-ca-enq-step-name { text-decoration: underline; text-underline-offset: 3px; }
.ztw-ca-enq-step-number { width: 26px; height: 26px; flex: none; border-radius: 50%; border: 2px solid currentColor; display: inline-flex; align-items: center; justify-content: center; font-size: var(--ca-size-tiny); font-weight: 600; line-height: 1; }
.ztw-ca-enq-step-open { color: var(--ca-color-band-text); }
.ztw-ca-enq-step-done { color: var(--ca-color-band-text-soft); }   /* finished steps in the same soft blue as the who-line (Dominic, 23 Oct 2026); only the current step is white */
.ztw-ca-enq-step-done .ztw-ca-enq-step-number { background: var(--ca-color-band-text-soft); border-color: var(--ca-color-band-text-soft); color: var(--ca-color-band); font-size: 0; }   /* a soft-blue disc with a tick in the band's blue; the digit stays in the markup for a reader without CSS */
.ztw-ca-page-title-done::before { content: ""; display: block; width: .9em; height: .9em; margin: 0 0 .25em; background: currentColor; -webkit-mask: var(--ca-glyph-check-circle) center / contain no-repeat; mask: var(--ca-glyph-check-circle) center / contain no-repeat; }   /* Dominic's tick-in-a-circle on its own line above "Enquiry received!" (0.11.17: "on the row above") */
.ztw-ca-enq-step-done .ztw-ca-enq-step-number::before { content: ""; width: 14px; height: 14px; background: currentColor; -webkit-mask: var(--ca-glyph-check) center / contain no-repeat; mask: var(--ca-glyph-check) center / contain no-repeat; }
.ztw-ca-enq-step-current { color: var(--ca-color-band-text); font-weight: 600; border-bottom-color: var(--ca-color-accent); }
.ztw-ca-enq-step-current .ztw-ca-enq-step-number { background: var(--ca-color-accent); border-color: var(--ca-color-accent); color: var(--ca-color-figure); }
.ztw-ca-enq { background: var(--ca-color-page); }
.ztw-ca-enq-card { max-width: 820px; display: grid; gap: var(--ca-space-card); box-sizing: border-box; }
.ztw-ca-enq-form { display: grid; gap: var(--ca-space-card); }
.ztw-ca-enq-head { display: grid; gap: 10px; }
.ztw-ca-enq-title { margin: 0; }
.ztw-ca-enq-field { margin: 0; padding: 0; border: 0; min-width: 0; display: grid; gap: 8px; align-content: start; }   /* start: a grid stretches its rows to fill the cell, which made an input with no note under it taller than its neighbour's (the date fields, 0.10.6) */
.ztw-ca-enq-field .ztw-ca-field-label { display: block; }
.ztw-ca-enq-field .ztw-ca-form-note { margin: 0; }
.ztw-ca-enq-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ca-space-gap) 20px; }
@supports selector(:has(a)) {   /* the enhanced follow-up appears once Yes is chosen (0.11.0); without :has it is simply always there */
	.ztw-ca-enq-enhanced-what, .ztw-ca-enq-timing-when { display: none; }
	.ztw-ca-enq-form:has(input[name="enhanced"][value="Yes"]:checked) .ztw-ca-enq-enhanced-what { display: grid; }
	.ztw-ca-enq-form:has(input[name="timing"][value="Yes"]:checked) .ztw-ca-enq-timing-when { display: grid; }   /* "When do you need it sorted?" after Yes (0.11.7) */
	.ztw-ca-enq-enhanced-else { display: none; }
	.ztw-ca-enq-form:has(input[name="enhanced_what[]"][value="Something else"]:checked) .ztw-ca-enq-enhanced-else { display: block; }   /* "please give details below" once Something else is ticked (0.11.10) */
}
.ztw-ca-enq-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: .5em; }   /* under a <legend>, which the fieldset's grid gap does not reach (Dominic, 23 Oct 2026: half an em between the question and its chips) */
.ztw-ca-enq-chip { position: relative; display: inline-flex; align-items: center; padding: 6px 15px; border: 1px solid var(--ca-color-chip-outline); border-radius: 999px; background: var(--ca-color-surface); color: var(--ca-color-band); font-size: var(--ca-size-small); font-weight: 600; line-height: 1.2; cursor: pointer; }   /* a thin grey outline at rest (Dominic, 23 Oct 2026: reads as clickable, a definite change when chosen, no clash with the tinted note below); the year pill's box (7px 16px) less the border */
.ztw-ca-enq-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.ztw-ca-enq-chip:hover { background: var(--ca-color-tinted); }
.ztw-ca-enq-chip:has(:checked) { background: var(--ca-color-pill-active); border-color: var(--ca-color-pill-active); color: var(--ca-color-band-text); }   /* chosen: the blue-500 fill, white text, as the selected year pill */
.ztw-ca-enq-chip:has(:focus-visible) { outline: 3px solid var(--ca-color-accent); outline-offset: 2px; }
.ztw-ca-enq-reassure { display: grid; gap: 4px; font-weight: 400; }   /* .ztw-ca-callout (the booking card's note): tinted, blue-800 text; only the title is 600 here */
.ztw-ca-enq-reassure p { margin: 0; font-size: var(--ca-size-small); line-height: 1.5; }
.ztw-ca-enq-reassure-title { font-weight: 600; }
textarea.ztw-ca-field-input { resize: vertical; min-height: 0; }
.ztw-ca-enq-footer { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; padding-top: var(--ca-space-card); border-top: 1px solid var(--ca-color-rule); }
.ztw-ca-enq-footer .ztw-ca-button { cursor: pointer; }
.ztw-ca-enq-link { background: none; border: 0; padding: 0; margin: 0; font: inherit; font-size: var(--ca-size-small); color: var(--ca-color-text); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.ztw-ca-enq-footer-note { flex-basis: 100%; margin: 0; font-size: var(--ca-size-tiny); color: var(--ca-color-text-muted); }
.ztw-ca-enq-saved:empty { display: none; }   /* the autosave status (0.10.3): shown only while saving or after a failed save */
.ztw-ca-enq-summary { margin: 0; display: grid; }
.ztw-ca-enq-summary-row { display: grid; grid-template-columns: 160px minmax(0, 1fr) auto; gap: 8px 16px; padding: 14px 0; border-bottom: 1px solid var(--ca-color-rule); font-size: var(--ca-size-small); line-height: 1.45; }
.ztw-ca-enq-summary-row:first-child { border-top: 1px solid var(--ca-color-rule); }
.ztw-ca-enq-summary-row dt { font-weight: 600; margin: 0; }
.ztw-ca-enq-summary-row dd { margin: 0; }
.ztw-ca-enq-summary-edit { color: var(--ca-color-text); text-decoration: underline; text-underline-offset: 3px; }
/* The second form on step 4: every field hidden but the newsletter tick, unless WPForms has an error to show on it */
.ztw-ca-enq-send .wpforms-field:not(.ztw-ca-enq-visible):not(.wpforms-has-error) { display: none; }
.ztw-ca-enq-send .wpforms-field-hidden { display: none; }
.ztw-ca-enq-send { padding: 0; }
.ztw-ca-enq-send .wpforms-container { margin-bottom: 0; }   /* WPForms' own 24px under the form; the page sets the gaps (0.11.13) */
.ztw-ca-enq-send .wpforms-submit-container { margin-top: var(--ca-space-gap); }
.ztw-ca-enq-form[data-step="4"] { gap: 16px; }   /* the send step grouped tighter under the button (0.11.13, Dominic's review) */
.ztw-ca-enq-form[data-step="4"] .ztw-ca-enq-summary { margin-bottom: 8px; }
.ztw-ca-enq-form[data-step="4"] .ztw-ca-enq-footer { padding-top: 16px; }
.ztw-ca-enq-send .wpforms-submit-container .ztw-ca-button { font-size: var(--wp--preset--font-size--large, 22px); width: auto; }   /* the theme's button, not the site's 24px WPForms submit (Additional CSS .wpforms-submit-container button): Send matches Continue */
.ztw-ca-enq-send .wpforms-field-checkbox ul { list-style: none; margin: 0; padding: 0; }   /* the newsletter tick as a plain line, not a bulleted list */
.ztw-ca-enq-send .wpforms-field-checkbox li { font-size: var(--ca-size-small); line-height: 1.45; }

/* --------------------------------------------------------------------------
   11. Small screens and reduced motion
   -------------------------------------------------------------------------- */
@media (max-width: 960px) {
	.ztw-ca-certificate { grid-template-columns: 1fr; }
	.ztw-ca-certificate-thumb { justify-self: start; max-width: 440px; }
	.ztw-ca-metric-grid, .ztw-ca-metric-grid-4, .ztw-ca-record-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ztw-ca-hero-split { grid-template-columns: 1fr; gap: var(--ca-space-card); }
}
@media (max-width: 640px) {
	.ztw-ca-metric-grid, .ztw-ca-metric-grid-4, .ztw-ca-record-grid { grid-template-columns: 1fr; }
	.ztw-ca-enq-grid { grid-template-columns: 1fr; }   /* the enquiry workspace's two-up fields stack (0.10.0) */
	.ztw-ca-enq-steps { gap: 0 18px; }   /* the tracker wraps to two rows on a phone (0.10.1) */
	.ztw-ca-enq-summary-row { grid-template-columns: 1fr; }
	.ztw-ca-enq-footer .ztw-ca-button { flex-basis: 100%; }
	.ztw-ca-job-carbon { margin-left: 0; justify-items: start; text-align: left; }   /* under the job number once the row wraps */
	.ztw-ca-card { padding: 18px; }
	.ztw-ca-document-meta { white-space: normal; }
	.ztw-ca-notice-card .ztw-ca-button { justify-self: stretch; }
}
@media (prefers-reduced-motion: reduce) {
	.ztw-ca * { transition: none !important; }
	.ztw-ca-spinner { animation: none; border-style: dotted; border-top-color: var(--ca-color-tinted-rule); }   /* still reads as "working" without spinning */
}