/*
Theme Name: DTS Theme V1
Theme URI: https://github.com/Diamond-Equity-LLC/dellc-dts-website
Description: DTS Theme V1 is the DTS (Diamond Trading Systems) site as an engineering drawing sheet: a white sheet on a pale desk, 1.5 px navy rules with a double inner border, square corners. The DVI chart is the drawing, its title block names who drew, checked and bounded each call, and the open record is the revision table. Goldman Sans for text at three ink strengths, Goldman Sans Condensed for headlines, Roboto Mono for figures and dates, Source Serif 4 for the AI's reasoning. Status green, amber and red as tints with labelled inks, always with a text label. Every colour, type style and space comes from the Diamond brand book. Templates for the home page, Learn pages, the members' daily report, legal pages and lists; every string ready for translation.
Author: Diamond Equity LLC
Version: 1.0.0
Requires at least: 6.6
Tested up to: 6.9
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: dts
*/

/* Every colour, font, size and space is a theme.json preset, generated from the brand book's
   tokens.json (tools/build-theme-json.mjs). This file holds layout and the sheet skin only. */
:root{
  --desk:var(--wp--preset--color--dts-desk); --sheet:var(--wp--preset--color--dts-sheet);
  --ink:var(--wp--preset--color--dts-ink); --ink-body:var(--wp--preset--color--dts-ink-body); --ink-2:var(--wp--preset--color--dts-ink-muted);
  --rule:var(--wp--preset--color--dts-rule); --grid:var(--wp--preset--color--dts-grid); --grid-2:var(--wp--preset--color--dts-grid-strong); --tint:var(--wp--preset--color--dts-tint);
  --link:var(--wp--preset--color--dts-link); --hover:var(--wp--preset--color--diamond-blue); --hatch:var(--wp--preset--color--diamond-sky);
  --calm:var(--wp--preset--color--dts-calm-tint); --calm-ink:var(--wp--preset--color--dts-calm-ink); --calm-hi:var(--wp--preset--color--dts-calm-edge);
  --unsettled:var(--wp--preset--color--dts-unsettled-tint); --unsettled-ink:var(--wp--preset--color--dts-unsettled-ink); --unsettled-hi:var(--wp--preset--color--dts-unsettled-edge);
  --stressed:var(--wp--preset--color--dts-stressed-tint); --stressed-ink:var(--wp--preset--color--dts-stressed-ink); --stressed-hi:var(--wp--preset--color--dts-stressed-edge);
  --sans:var(--wp--preset--font-family--dts-sans); --head:var(--wp--preset--font-family--dts-head); --mono:var(--wp--preset--font-family--dts-mono); --serif:var(--wp--preset--font-family--dts-serif);
  --s1:var(--wp--preset--spacing--space-1); --s2:var(--wp--preset--spacing--space-2); --s3:var(--wp--preset--spacing--space-3);
  --s4:var(--wp--preset--spacing--space-4); --s6:var(--wp--preset--spacing--space-6); --s8:var(--wp--preset--spacing--space-8); --s12:var(--wp--preset--spacing--space-12);
  --r-sm:var(--wp--custom--radius--sm);
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scrollbar-color:var(--ink-2) var(--desk)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;caret-color:var(--ink)}
::selection{background:var(--ink);color:var(--sheet)}
a{text-underline-offset:.2em}
:focus-visible{outline:3px solid var(--link);outline-offset:3px}
.sr,.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip-link:focus{position:absolute;inset-inline-start:var(--s4);top:var(--s2);width:auto;height:auto;clip:auto;background:var(--ink);color:var(--sheet);padding:var(--s2) var(--s4);z-index:10}
p{margin:0 0 var(--s3)}
h1,h2,h3{margin:0 0 var(--s3);text-wrap:balance}
h1{max-width:22ch}
h1 em{font-style:normal;color:var(--link)}
strong,b{font-weight:600;color:var(--ink)}

/* type styles from the brand book (custom.type.*) */
.t-label{font:var(--wp--custom--type--label--weight) var(--wp--custom--type--label--size)/var(--wp--custom--type--label--line-height) var(--wp--custom--type--label--family);letter-spacing:var(--wp--custom--type--label--letter-spacing);text-transform:var(--wp--custom--type--label--transform);color:var(--ink-2)}
.t-name{font:var(--wp--custom--type--name--weight) var(--wp--custom--type--name--size)/var(--wp--custom--type--name--line-height) var(--wp--custom--type--name--family);letter-spacing:var(--wp--custom--type--name--letter-spacing)}
.t-strong{font:var(--wp--custom--type--strong--weight) var(--wp--custom--type--strong--size)/var(--wp--custom--type--strong--line-height) var(--wp--custom--type--strong--family)}
.t-lead{font:var(--wp--custom--type--lead--weight) var(--wp--custom--type--lead--size)/var(--wp--custom--type--lead--line-height) var(--wp--custom--type--lead--family)}
.t-text{font:var(--wp--custom--type--text--weight) var(--wp--custom--type--text--size)/var(--wp--custom--type--text--line-height) var(--wp--custom--type--text--family)}
.t-small{font:var(--wp--custom--type--small--weight) var(--wp--custom--type--small--size)/var(--wp--custom--type--small--line-height) var(--wp--custom--type--small--family)}
.t-fine{font:var(--wp--custom--type--fine--weight) var(--wp--custom--type--fine--size)/var(--wp--custom--type--fine--line-height) var(--wp--custom--type--fine--family)}
.t-data{font:var(--wp--custom--type--data--weight) var(--wp--custom--type--data--size)/var(--wp--custom--type--data--line-height) var(--wp--custom--type--data--family);letter-spacing:var(--wp--custom--type--data--letter-spacing);font-variant-numeric:tabular-nums}
.t-caption{font:var(--wp--custom--type--caption--weight) var(--wp--custom--type--caption--size)/var(--wp--custom--type--caption--line-height) var(--wp--custom--type--caption--family);color:var(--ink-2)}
.t-control{font:var(--wp--custom--type--control--weight) var(--wp--custom--type--control--size)/var(--wp--custom--type--control--line-height) var(--wp--custom--type--control--family);letter-spacing:var(--wp--custom--type--control--letter-spacing);text-transform:var(--wp--custom--type--control--transform)}
.t-figure{font:var(--wp--custom--type--figure--weight) var(--wp--custom--type--figure--size)/var(--wp--custom--type--figure--line-height) var(--wp--custom--type--figure--family)}
.t-number{font:var(--wp--custom--type--number--weight) var(--wp--custom--type--number--size)/var(--wp--custom--type--number--line-height) var(--wp--custom--type--number--family)}
.t-reasoning{font:var(--wp--custom--type--reasoning--weight) var(--wp--custom--type--reasoning--size)/var(--wp--custom--type--reasoning--line-height) var(--wp--custom--type--reasoning--family)}

/* the sheet on the desk: one white sheet, a 1.5 px rule and a double inner line */
.wp-site-blocks{max-width:var(--wp--style--global--wide-size);margin:var(--s2) auto;padding-block:var(--s2);overflow-x:clip;background:var(--sheet);border:1.5px solid var(--rule);box-shadow:inset 0 0 0 5px var(--sheet),inset 0 0 0 6px var(--grid-2)}
.wp-site-blocks > *{padding-inline:max(var(--s4),env(safe-area-inset-left,0px)) max(var(--s4),env(safe-area-inset-right,0px))}
.block{border:1.5px solid var(--rule)}
/* WordPress adds its block gap as a top margin on every child of the main group; the sections carry their own spacing */
.wp-site-blocks > * + *,main.wp-block-group > * + *{margin-block-start:0}
section{padding-block:var(--s4) var(--s3)}
section + section{border-block-start:1px solid var(--rule)}

/* header */
.site-head{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);padding-block:var(--s3);border-block-end:1.5px solid var(--rule);flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:var(--s3);text-decoration:none;color:var(--ink)}
.brand img{width:32px;height:32px;display:block}
.brand b{display:block}
.brand span span{display:block;text-transform:none;letter-spacing:.02em;color:var(--ink-2)}
.member-menu{position:relative}
.member-menu summary{cursor:pointer;color:var(--ink);min-block-size:24px}
.member-menu ul{position:absolute;inset-inline-end:0;z-index:10;margin:var(--s1) 0 0;padding:var(--s2) 0;list-style:none;min-inline-size:12rem;background:var(--sheet);border:1.5px solid var(--rule)}
.member-plan{padding:var(--s1) var(--s3) var(--s2);color:var(--ink-2);border-block-end:1px solid var(--grid-2)}
.member-menu a{display:block;padding:var(--s1) var(--s3);color:var(--ink);text-decoration:none}
.member-menu a:hover{background:var(--tint);text-decoration:underline}
nav.main{display:flex;gap:var(--s1) var(--s4);flex-wrap:wrap;padding-block:var(--s3);border-block-end:1px solid var(--grid-2)}
nav.main a{color:var(--ink);text-decoration:none;font-weight:500}
nav.main a:hover{text-decoration:underline}

/* hero */
.hero{padding-block:var(--s6) var(--s2)}
.sub{color:var(--ink-2);max-width:60ch}
.gate{display:inline-flex;align-items:center;gap:var(--s2);margin-block-start:var(--s4);background:var(--ink);color:var(--sheet)!important;font:600 var(--wp--preset--font-size--lead)/1 var(--sans);text-decoration:none!important;padding:var(--s4) var(--s6);min-height:52px;border-radius:var(--r-sm);transition:background .15s}
.gate:hover{background:var(--hover)}
.gate svg{width:18px;height:18px}
.see-plans{margin-block:var(--s2) 0}
.invite-note{margin-block-start:var(--s2);max-width:520px;color:var(--ink-2)}
.see-plans + .invite-note{margin-block-start:var(--s1)}
.terms{margin:var(--s2) 0 0;color:var(--ink-2)}
.callout{margin:var(--s3) 0 0;padding:var(--s2) var(--s3);background:var(--tint)}
.callout > b{display:block;font-family:var(--head);font-weight:400;font-size:24px;line-height:1.2;color:var(--ink)}
.callout p{margin:4px 0 0;color:var(--ink-2)}
.trio{list-style:none;margin:var(--s2) 0 0;padding:0;color:var(--ink-2)}
.trio li{padding:6px 0;border-block-start:1px solid var(--grid-2)}
.trio b{color:var(--link)}
.trio li.more a{font-weight:500}

/* the drawing */
.drawing{margin-block-start:var(--s4)}
.drawing .head{display:flex;justify-content:space-between;gap:var(--s2);padding:var(--s3);border-block-end:1px solid var(--rule);flex-wrap:wrap}
.drawing .head .t-label{color:var(--ink)}
.plot{position:relative;background:var(--sheet)}
.plot svg{display:block;width:100%;height:auto;touch-action:pan-y}
.members{margin:0;padding:var(--s3);border-block-start:1.5px solid var(--rule);background:var(--tint)}

/* scale */
.scale{margin:var(--s4) 0 var(--s2);border:1px solid var(--rule)}
.scale .bar{display:grid;grid-template-columns:1fr 1fr 1fr;height:34px;background:linear-gradient(90deg,var(--calm),var(--unsettled) 50%,var(--stressed))}
.scale .bar div{display:grid;place-items:center;font-weight:600;letter-spacing:.08em;color:var(--calm-ink)}
.scale .bar div:nth-child(2){color:var(--unsettled-ink)}
.scale .bar div:last-child{color:var(--stressed-ink)}
.scale .ticks{display:flex;align-items:center;gap:var(--s3);color:var(--ink-2);padding:var(--s2);border-block-start:1px solid var(--rule)}
.scale .ticks .arrow{flex:1;height:0;border-block-start:1.5px solid var(--ink-2);position:relative}
.scale .ticks .arrow::after{content:"";position:absolute;inset-inline-end:-1px;top:-5px;width:0;height:0;border-style:solid;border-width:4.5px 0 4.5px 8px;border-color:transparent transparent transparent var(--ink-2)}
.chip{display:inline-block;font-style:normal;padding:3px var(--s2);border-radius:var(--r-sm);font-weight:600;background:var(--tint);color:var(--ink);border:1px solid var(--grid-2)}
.chip-calm{background:var(--calm);color:var(--calm-ink);border-color:var(--calm-hi)}
.chip-unsettled{background:var(--unsettled);color:var(--unsettled-ink);border-color:var(--unsettled-hi)}
.chip-stressed{background:var(--stressed);color:var(--stressed-ink);border-color:var(--stressed-hi)}

/* the check: the differentiator */
.check{margin:var(--s4) 0 var(--s2);background:var(--tint)}
.check .hd{display:flex;justify-content:space-between;gap:var(--s2);padding:var(--s3);border-block-end:1px solid var(--rule);flex-wrap:wrap}
.check .hd .t-label{color:var(--ink)}
.check dl{display:grid;grid-template-columns:92px 1fr;gap:var(--s3);margin:0;padding:var(--s3)}
.check dt{line-height:1.6}
.check dd{margin:0;color:var(--ink);min-width:0}
.check dd.call{color:var(--ink)}
.check dd.call span{color:var(--link)}
.verdict{display:inline-flex;align-items:center;gap:var(--s2);font-size:var(--wp--preset--font-size--small);padding:var(--s2) var(--s3);border:1.5px solid var(--ink);border-radius:var(--r-sm);background:var(--sheet)}
.verdict svg{width:16px;height:16px}
.verdict.agrees{border-color:var(--calm-ink);color:var(--calm-ink);background:var(--calm)}
.verdict.flags{border-color:var(--unsettled-ink);color:var(--unsettled-ink);background:var(--unsettled)}
.check .ft{padding:var(--s3);border-block-start:1px solid var(--rule)}
.never{font-style:italic;color:var(--ink-2);margin-block-start:var(--s3)}

/* parts list: strategies */
.parts{margin-block-start:var(--s4)}
.srow{display:grid;grid-template-columns:1fr auto;gap:var(--s2) var(--s3);align-items:center;padding:var(--s3);border-block-end:1px solid var(--rule)}
.srow:last-child{border-block-end:0}
.srow .nm{grid-column:1/-1;color:var(--ink);font-weight:600}
.srow .desc{grid-column:1/-1;margin:-2px 0 var(--s1);color:var(--ink-2)}
.srow .st{text-transform:uppercase}
.srow .st span{color:var(--link)}
.srow button{display:inline-flex;align-items:center;gap:var(--s1);background:var(--sheet);color:var(--ink);border:1.5px solid var(--ink);border-radius:var(--r-sm);padding:11px var(--s3);min-height:42px;cursor:pointer}
.srow button:hover{background:var(--ink);color:var(--sheet)}
.srow button svg{width:14px;height:14px}
.srow .mean{grid-column:1/-1;margin:var(--s1) 0 0;color:var(--ink-2)}
.fine{color:var(--ink-2);margin-block-start:var(--s3)}

/* one trading day */
.day{list-style:none;margin:var(--s4) 0 0;padding:0}
.day li{display:grid;grid-template-columns:110px 1fr;gap:0 var(--s3);padding:var(--s3);border-block-end:1px solid var(--rule)}
.day li:last-child{border-block-end:0}
.day .t{letter-spacing:.1em}
.day b{display:block}

/* revision table: the record */
.revwrap{overflow-x:auto;margin-block-start:var(--s4)}
table.rev{border-collapse:collapse;width:100%;min-width:620px}
table.rev th{text-align:start;padding:var(--s2) var(--s3);border-block-end:1px solid var(--rule);border-inline-end:1px solid var(--grid-2);line-height:1.6}
table.rev td{padding:9px var(--s3);border-inline-end:1px solid var(--grid-2);white-space:nowrap}
table.rev td:last-child,table.rev th:last-child{border-inline-end:0}
.ph{color:var(--ink-2)}

/* join */
.get{list-style:none;margin:var(--s4) 0 0;padding:0}
.get li{display:flex;justify-content:space-between;gap:var(--s3);align-items:center;padding:11px var(--s3);border-block-end:1px solid var(--rule)}
.get li:last-child{border-block-end:0}
.tag{line-height:1;padding:6px var(--s2);border:1.5px solid var(--ink);border-radius:2px;white-space:nowrap;color:var(--ink)}
.tag.today{background:var(--ink);color:var(--sheet)}
.tag.plan{border-style:dashed;color:var(--ink-2)}
.join{margin-block-start:var(--s4);width:fit-content;padding:var(--s3);background:var(--tint)}
.join .signup p:first-child{margin:0}.join .gate{margin-block-start:0}
.join p{margin:0 0 var(--s2)}
.join .signup .see-plans{margin:6px 0 0}

/* footer */
.site-foot{padding-block:var(--s6);border-block-start:1.5px solid var(--rule);color:var(--ink-2)}
.site-foot p{margin:0 0 var(--s2)}
.site-foot .links{display:flex;gap:var(--s4);flex-wrap:wrap}

/* reading pages: Learn, legal, the members' daily report, lists */
.reading{padding-block:var(--s6) var(--s8)}
.reading .crumb{display:inline-block;margin-block-end:var(--s3)}
.reading .meta{display:block;margin-block-end:var(--s3)}
.reading :is(p,ul,ol,figure,table){max-width:60ch}
.reading img{max-width:100%;height:auto}
.post-list{list-style:none;margin:var(--s4) 0 0;padding:0;max-width:60ch}
.post-list li{padding-block:var(--s3);border-block-end:1px solid var(--rule)}
.post-list a{color:var(--ink);text-decoration:none}
.post-list a:hover{text-decoration:underline}

/* phones: source order (headline, lead, Join button, chart, strategies box), #152 */
@media (min-width:760px){
  .wp-site-blocks{margin:var(--s4) auto}
  .drawing{margin-block-start:0}
}
/* checkout (issue #87): templates/page-membership-checkout.html around PMPro's own form. PMPro's markup is
   re-ordered into three steps (account, confirm, payment) and drawn as sheet boxes; functions.php re-words it. */
.co.reading{padding-block:var(--s4) var(--s8)}
.co-top{padding-block:var(--s2) 0}
.co-top .t-label{margin:0}
.co-top h1{margin:var(--s1) 0 var(--s2)}
.co .co-photo{margin:var(--s3) 0 0;max-width:none;aspect-ratio:5/2;overflow:hidden;border:1.5px solid var(--rule);background:var(--tint)}
.co-photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 55%}
.co-offer{display:grid;grid-template-columns:1fr 1fr;margin-block-start:var(--s4)}
.co-offer div{padding:var(--s3);border-inline-end:1px solid var(--rule);border-block-end:1px solid var(--rule)}
.co-offer div:nth-child(2){border-inline-end:0}
.co-offer div:nth-child(3){grid-column:1 / -1;border:0}
.co-offer .t-label{display:block}
.co-offer b{display:block;margin-block-start:2px;font:400 30px/1.1 var(--head);color:var(--ink)}
.co-offer em{font-style:normal;color:var(--link)}
.co-offer small{display:block;margin-block-start:var(--s1);font-family:var(--sans)}
.co-cols{display:grid;gap:var(--s4);padding-block-start:var(--s4)}
.co .co-cols :is(p,ul,figure){max-width:none}
.co .dts-notice{display:none}   /* the page body's seeded notice (dts.php); the footer carries the notice */

/* the form: PMPro's cards as numbered sheet boxes */
.pmpro-checkout .pmpro{color:var(--ink-body)}   /* PMPro's variation_1.css sets #222 on .pmpro */
/* the column gap is the only space above step 1: no block-gap margin on the post content, no PMPro section padding */
.co-cols > .wp-block-post-content{margin-block-start:0}
.pmpro-checkout .co-cols .pmpro_section{margin-block-start:0;padding-block-start:0}
.pmpro-checkout .pmpro_form{display:flex;flex-direction:column}
.pmpro-checkout #pmpro_message{order:0}
.pmpro-checkout #pmpro_user_fields{order:1}
.pmpro-checkout #pmpro_form_fieldset-alerts{order:2}   /* issue #138: optional alert contacts, after the account */
.pmpro-checkout #pmpro_form_fieldset-confirm,.pmpro-checkout #pmpro_tos_fields{order:3}
.pmpro-checkout #pmpro_pricing_fields{order:4}
.pmpro-checkout #pmpro_message_bottom{order:5}
.pmpro-checkout .pmpro_form_submit{order:6}
.pmpro-checkout .pmpro_form_fieldset{margin:0;padding:0;border:0;min-width:0}
.pmpro-checkout .pmpro_card{margin:0 0 var(--s4);padding:0;border:1.5px solid var(--rule);border-radius:0;box-shadow:none;background:var(--sheet)}
.pmpro-checkout .pmpro_card_title{display:flex;align-items:baseline;gap:var(--s3);margin:0;padding:var(--s3);border-block-end:1px solid var(--rule);background:var(--tint);font:400 24px/1.2 var(--head);color:var(--ink)}
.pmpro-checkout .pmpro_card_title::before{font:600 22px/1 var(--mono);color:var(--link)}
.pmpro-checkout #pmpro_user_fields-title::before{content:"1"}
.pmpro-checkout #pmpro_form_fieldset-alerts-title::before{content:"2"}
.pmpro-checkout #pmpro_form_fieldset-confirm-title::before{content:"3"}
.pmpro-checkout #pmpro_pricing_fields .pmpro_card_title::before{content:"4"}
.pmpro-checkout #pmpro_tos_fields{margin:0 0 var(--s4);padding:var(--s2) var(--s3) var(--s3);border:1.5px solid var(--rule);border-block-start:0}
.pmpro-checkout .pmpro_card_content,.pmpro-checkout .pmpro_card_actions{padding:var(--s3);border:0;background:none}
.pmpro-checkout .pmpro_card_actions{padding-block-start:0}
.pmpro-checkout #pmpro_pricing_fields :is(.pmpro_level_name_text,.pmpro_level_description_text){display:none}

/* fields: email first, two to a row on wide screens */
.pmpro-checkout :is(#pmpro_user_fields,#pmpro_form_fieldset-alerts) .pmpro_form_fields{display:flex;flex-direction:column;gap:var(--s3)}
.pmpro-checkout #pmpro_form_fieldset-alerts :is(.pmpro_form_hint,.pmpro_form_fields-description){margin:0;font-size:14px;color:var(--ink-2)}
.pmpro-checkout #pmpro_user_fields .pmpro_cols-2:has(#bemail){order:-1}
.pmpro-checkout .pmpro_cols-2{display:grid;gap:var(--s3)}
.pmpro-checkout .pmpro_cols-2 > *{width:auto}   /* PMPro sizes these as half-width flex items */
.pmpro-checkout .pmpro_form_field{display:grid;gap:var(--s1);margin:0;min-width:0}
.pmpro-checkout .pmpro_form_label{font:600 15px/1.3 var(--sans);color:var(--ink)}
.pmpro-checkout .pmpro_asterisk{color:var(--ink-2)}
.pmpro-checkout .pmpro_form_input:not([type=checkbox]){width:100%;min-height:48px;padding:12px;font:400 17px/1.3 var(--sans);color:var(--ink);background:var(--sheet);border:1.5px solid var(--ink-2);border-radius:var(--r-sm);box-shadow:none}
.pmpro-checkout .pmpro_form_input:focus{outline:3px solid var(--link);outline-offset:1px;border-color:var(--ink)}
.pmpro-checkout .pmpro_form_field-password-toggle button{min-height:44px;padding:6px 0;background:none;border:0;color:var(--link);font:500 14px/1 var(--sans);cursor:pointer}
.pmpro-checkout #pmpro_user_fields .pmpro_card_actions{font-size:14px;color:var(--ink-2)}

/* confirm: the one box */
/* block, not flex: flex would split the sentence at each link */
/* step 2 is two boxes in one sheet box: PMPro's "Confirm" user-field group, made in admin (its card title is the
   step heading), then PMPro's own terms box */
.pmpro-checkout #pmpro_form_fieldset-confirm .pmpro_card{margin:0;border-block-end:0}
.pmpro-checkout #pmpro_form_fieldset-confirm .pmpro_card_content{padding-block-end:0}
.pmpro-checkout :is(#pmpro_tos_fields,#pmpro_form_fieldset-confirm) .pmpro_form_label-inline,.pmpro-checkout #pmpro_tos_fields .pmpro_form_label{display:block;position:relative;padding-inline-start:34px;font:400 16px/1.5 var(--sans);cursor:pointer}
.pmpro-checkout :is(#pmpro_tos_fields,#pmpro_form_fieldset-confirm) a{padding:0;margin:0}
.pmpro-checkout :is(#pmpro_tos_fields,#pmpro_form_fieldset-confirm) input[type=checkbox]{position:absolute;inset-inline-start:0;top:1px;width:22px;height:22px;margin:0;accent-color:var(--ink)}
.pmpro-checkout #pmpro_tos_fields input#tos{width:22px}   /* PMPro sets #pmpro_tos_fields input#tos{width:auto} with two ids */

/* payment: the receipt, the code and the button */
.co-plan{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s3);padding-block-end:var(--s3);border-block-end:1px solid var(--grid-2)}
.co-plan .t-label{display:block}
.co-plan b{display:block;font:400 22px/1.15 var(--head);color:var(--ink)}
.co-plan .t-data{white-space:nowrap;color:var(--ink)}
.co-due{display:grid;grid-template-columns:1fr auto;gap:var(--s2) var(--s3);align-items:baseline;margin:var(--s3) 0 0;color:var(--ink)}
.co-due dd{margin:0;text-align:end}
.co-due dd.t-number{font-size:22px;line-height:1}
.pmpro-checkout button#other_discount_code_toggle[type=button]{min-height:44px;padding:6px 0;background:none;border:0;color:var(--link);font:500 14px/1 var(--sans);text-decoration:underline;text-underline-offset:.2em;cursor:pointer}
.pmpro-checkout .pmpro_form_fields-inline{display:flex;flex-wrap:wrap;gap:var(--s2)}
.pmpro-checkout #pmpro_other_discount_code{flex:1 1 200px;font-family:var(--mono);letter-spacing:.06em;text-transform:uppercase}
.pmpro-checkout .pmpro_btn-submit-discount-code{min-height:48px;padding:0 var(--s4);background:var(--sheet);color:var(--ink);border:1.5px solid var(--ink);border-radius:var(--r-sm);font:600 12px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;cursor:pointer}
.pmpro-checkout .pmpro_btn-submit-discount-code:hover{background:var(--ink);color:var(--sheet)}
.pmpro-checkout #pmpro_pricing_fields{margin-block-end:0;border-block-end:0}
.pmpro-checkout .pmpro_form_submit{margin:0;padding:0 var(--s3) var(--s3);border:1.5px solid var(--rule);border-block-start:0}
.pmpro-checkout .pmpro_form_submit,.pmpro-checkout #pmpro_submit_span{display:block}   /* PMPro makes the row a flex box, which shrinks the button */
.pmpro-checkout #pmpro_btn-submit{width:100%;min-height:52px;padding:var(--s4) var(--s6);background:var(--ink);color:var(--sheet);border:0;border-radius:var(--r-sm);font:600 18px/1 var(--sans);cursor:pointer;transition:background .15s}
.pmpro-checkout #pmpro_btn-submit:hover{background:var(--hover)}
.pmpro-checkout .pmpro_message{margin:0 0 var(--s4);padding:var(--s3);border:1.5px solid var(--ink);border-radius:0;background:var(--tint);color:var(--ink)}
.pmpro-checkout .pmpro_message.pmpro_success{border-color:var(--calm-ink);background:var(--calm);color:var(--calm-ink)}
.pmpro-checkout .pmpro_message.pmpro_error{border-color:var(--stressed-ink);background:var(--stressed);color:var(--stressed-ink)}
.co-after{margin:var(--s3) 0 0;font:400 15px/1.5 var(--sans);color:var(--ink)}   /* a promise at the payment moment, not fine print */
.co-help{margin:var(--s3) 0 0}

/* the aside */
.co-side h2{margin:0}
.co-get{list-style:none;margin:var(--s2) 0 0;padding:0}
.co-get li{position:relative;padding:11px var(--s3) 11px 34px;border-block-end:1px solid var(--rule);font-size:15px;color:var(--ink)}
.co-get li:last-child{border-block-end:0}
.co-get li::before,.co-dia li::before{content:"◆";position:absolute;inset-inline-start:14px;top:11px;font-size:11px;line-height:23px;color:var(--link)}
.co-dia{margin:0;background:var(--sheet)}
.co-dia-hd{padding:var(--s3) var(--s3) 11px;background:var(--ink);color:var(--sheet)}
.co-dia-hd .t-label{display:block;color:var(--grid-2)}
.co-dia-hd h2{display:block;margin:5px 0 0;font:400 22px/1.1 var(--head);color:var(--sheet)}
.co-dia-bd{padding:var(--s3) var(--s3) 2px}
.co-dia-bd p{margin:0;font-size:15px}
.co-dia ul{list-style:none;margin:var(--s2) 0 0;padding:0}
.co-dia li{position:relative;padding:7px 0 7px 22px;border-block-start:1px solid var(--grid-2);font-size:15px;color:var(--ink)}
.co-dia li::before{inset-inline-start:2px;top:7px}
.co-dia li span{display:block;font-size:13px;color:var(--ink-2)}
/* status first, at the label size, so a planned feature never reads as included */
.co-dia li .tag{display:table;margin:0 0 4px;padding:4px 6px;font-style:normal;font-size:11px}
.co-dia .co-up{margin:0;padding:var(--s3);border-block-start:1px solid var(--rule);background:var(--tint);font-size:14px}
@media (min-width:760px){
  /* the photo fills the aside column beside the heading and the offer; the offer is as wide as the form */
  .co-top{display:grid;grid-template-columns:minmax(0,1fr) 300px;column-gap:var(--s4);align-items:start}
  .co-top > :not(.co-photo){grid-column:1}
  .co .co-photo{grid-column:2;grid-row:1 / 4;align-self:stretch;aspect-ratio:auto;margin:0}
  .co-offer{grid-template-columns:repeat(3,minmax(0,1fr))}
  .co-offer div{border-block-end:0}
  .co-offer div:nth-child(2){border-inline-end:1px solid var(--rule)}
  .co-offer div:nth-child(3){grid-column:auto}
  /* source order is the phone order (perks, form, Diamond); here both asides move beside the form */
  .co-cols{grid-template-columns:minmax(0,1fr) 300px;grid-template-rows:auto 1fr;align-items:start}
  .co-cols > .wp-block-post-content{grid-column:1;grid-row:1 / 3}
  .co-cols > .co-side{grid-column:2;grid-row:1}
  .co-cols > .co-side-dia{grid-row:2}
  .pmpro-checkout .pmpro_cols-2{grid-template-columns:1fr 1fr}
}

/* billing (issue #93): templates/page-membership-billing.html; the body is inc/billing-portal.php (Stripe
   Checkout flow). The design canvas "DTS billing", flow "portal". */
.bl.reading{padding-block:var(--s4) var(--s8)}
.bl .dts-notice{display:none}   /* the page body's seeded notice (dts.php); the footer carries the notice */
.bl :is(p,ul,dl,figure){max-width:none}
.bl-top{padding-block:var(--s2) 0}
.bl-top .t-label{margin:0}
.bl-top h1{margin:var(--s1) 0 var(--s2)}
.bl-sub{margin:0;font-size:18px;color:var(--ink-2)}
.bl-draw{margin:var(--s3) 0 var(--s4);border:1.5px solid var(--rule);background:var(--tint)}
.bl-draw svg{display:block;width:100%;height:100%;max-height:150px}
.bl-test{margin-block-start:var(--s4);border:1.5px solid var(--rule)}
.bl-test-hd{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s3);flex-wrap:wrap;padding:11px var(--s3);background:var(--ink);color:var(--sheet)}
.bl-test-hd b{font:400 22px/1.1 var(--head);color:var(--sheet)}
.bl-test-hd .t-label{color:var(--grid-2)}
.bl-test-bd{padding:var(--s3)}
.bl-test-bd p{margin:0}
.bl-cardno{display:grid;grid-template-columns:1fr 1fr;margin-block-start:var(--s3);border:1px solid var(--rule)}
.bl-cardno div{padding:9px var(--s3)}
.bl-cardno div:first-child{grid-column:1 / -1;border-block-end:1px solid var(--rule)}
.bl-cardno div:last-child{border-inline-start:1px solid var(--rule)}
.bl-cardno .t-label{display:block}
.bl-cardno b{display:block;margin-block-start:2px;font:600 15px/1.35 var(--mono);letter-spacing:.04em}
.bl-cols{display:grid;gap:var(--s4);padding-block-start:var(--s4)}
.bl-main{min-width:0}
.bl-box{margin:0 0 var(--s4);border:1.5px solid var(--rule)}
.bl-hd{margin:0;padding:var(--s3);border-block-end:1px solid var(--rule);background:var(--tint);font:400 24px/1.2 var(--head);color:var(--ink)}
.bl-bd{padding:var(--s3)}
.bl-onfile{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;color:var(--ink)}
.bl-onfile svg{flex:none;width:40px;height:28px}
.bl-onfile b{display:block;font-weight:500}
.bl-onfile .t-data{display:block;color:var(--ink-2)}
.bl-lead{margin:0;color:var(--ink-body)}
.bl-when{margin:var(--s3) 0 0;padding-block-start:var(--s3);border-block-start:1px solid var(--grid-2);color:var(--ink)}
.bl .bl-go{width:100%;justify-content:center;border:0;cursor:pointer}
.bl .bl-go[disabled]{background:var(--ink-2);cursor:progress}
.bl-by{display:flex;align-items:center;gap:var(--s2);margin:var(--s2) 0 0;color:var(--ink-2)}
.bl-by svg{flex:none;width:14px;height:14px}
.bl-err{display:flex;gap:var(--s3);align-items:baseline;margin:0 0 var(--s4);padding:var(--s3);border:1.5px solid var(--stressed-ink);background:var(--stressed);color:var(--stressed-ink)}
.bl-err b{flex:none;font:600 11px/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:inherit}
.bl-help{margin:0;color:var(--ink-2)}
.bl-side h2{margin:0 0 var(--s2)}
.bl-plan{margin:0;border:1.5px solid var(--rule)}
.bl-plan div{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s3);padding:10px var(--s3);border-block-end:1px solid var(--rule)}
.bl-plan div:last-child{border-block-end:0}
.bl-plan dt{font-size:15px;color:var(--ink-2)}
.bl-plan dd{margin:0;min-width:0;text-align:end;overflow-wrap:anywhere;color:var(--ink)}

/* account (issue #92): stock PMPro [pmpro_account] in the normal page template, CSS only, no PHP (operator).
   The design canvas "DTS membership account". The page content puts, before [pmpro_account], an image block
   with the class acct-art (assets/account-photo.jpg, alt "", no caption) and a paragraph with the class acct-beta
   (the Beta test-mode note). The photo is Unsplash photo-1621570277341-4fea9203f5e0 (Unsplash License), toned
   cool toward the navy in the file itself. */
.pmpro-account .dts-notice{display:none}   /* the page body's seeded notice (dts.php); the footer carries the notice */
.pmpro-account .reading :is(p,ul,figure,table){max-width:none}
.pmpro-account .acct-art{display:flex;flex-direction:column;margin:var(--s3) 0 0;border:1.5px solid var(--rule);background:var(--tint)}
.pmpro-account .acct-art img{display:block;width:100%;height:auto;aspect-ratio:5 / 2;object-fit:cover;object-position:50% 38%}   /* below 760px: a band that keeps both faces */
.pmpro-account .acct-beta{margin:var(--s3) 0 0;padding:var(--s2) 10px;border:1px dashed var(--ink-2);font-size:14px;color:var(--ink)}
.pmpro-account .pmpro_section{margin:var(--s4) 0 0}
.pmpro-account .pmpro_section_title{margin:0 0 10px;font:400 26px/1.15 var(--head);color:var(--ink)}
.pmpro-account .pmpro_card{margin:0;padding:0;border:1.5px solid var(--rule);border-radius:0;box-shadow:none;background:var(--sheet)}
.pmpro-account .pmpro_card_title{display:block;margin:0;padding:var(--s3);border-block-end:1px solid var(--rule);background:var(--tint);font:400 24px/1.2 var(--head);color:var(--ink)}
.pmpro-account .pmpro_card_title .avatar{display:none}
.pmpro-account .pmpro_card_content{padding:var(--s3);border:0;background:none}
.pmpro-account .pmpro_card_content .pmpro_list{display:block;margin:0;padding:0;list-style:none;font-size:16px}
/* 0-4-0: PMPro's base.css resets these items with .pmpro_list.pmpro_list-plain .pmpro_list_item (0-3-0), and its
   variation_1.css sizes .pmpro_cols-3 children to a third of the row: width:auto undoes that */
.pmpro-account .pmpro_card_content .pmpro_list .pmpro_list_item{display:grid;width:auto;grid-template-columns:minmax(0,10rem) minmax(0,1fr);gap:var(--s1) var(--s3);margin:0;padding:var(--s2) 0;border-block-end:1px solid var(--grid-2);color:var(--ink);overflow-wrap:anywhere}
.pmpro-account .pmpro_card_content .pmpro_list .pmpro_list_item:last-child{border-block-end:0}
.pmpro-account .pmpro_list_item :is(strong,.pmpro_list_item_label){font-weight:400;color:var(--ink-2)}
.pmpro-account .pmpro_list_item_value{font:500 15px/1.5 var(--mono);letter-spacing:.02em}
.pmpro-account .pmpro_card_actions{display:flex;flex-wrap:wrap;gap:var(--s1) 18px;padding:6px var(--s3);border:0;border-block-start:1px solid var(--grid-2);background:none;font-size:15px}
.pmpro-account .pmpro_card_action_separator{display:none}
.pmpro-account .pmpro_card_actions a{display:inline-flex;align-items:center;min-height:44px;font-weight:500}
.pmpro-account .pmpro_message{margin:var(--s3) 0 0;padding:10px var(--s3);border:1.5px solid var(--ink);border-radius:0;background:var(--tint);color:var(--ink)}
.pmpro-account #pmpro_account-orders .pmpro_card_content{overflow-x:auto}
.pmpro-account .pmpro_table{width:100%;border-collapse:collapse;font-size:15px}
.pmpro-account .pmpro_table th{padding:0 10px var(--s2) 0;border:0;border-block-end:1px solid var(--rule);background:none;text-align:start;font:600 11px/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
.pmpro-account .pmpro_table td{padding:6px 10px 6px 0;border:0;border-block-end:1px solid var(--grid-2);white-space:nowrap;color:var(--ink);font-variant-numeric:tabular-nums}
.pmpro-account :is(.pmpro_table_order-date,.pmpro_table_order-amount){font:500 14px/1.5 var(--mono);letter-spacing:.02em}
.pmpro-account .pmpro_table_order-date a{display:inline-flex;align-items:center;min-height:36px}
.pmpro-account .pmpro_tag{padding:0;border:0;border-radius:0;background:none;font:inherit;color:inherit}
@media (min-width:760px){
  /* page content order: image block, Beta paragraph, [pmpro_account]. Visual order = source order: the title,
     the Beta note, My Account and My Memberships in the left column, the drawing beside them, Order History full width */
  .pmpro-account main.reading{display:grid;grid-template-columns:minmax(0,1fr) 300px;column-gap:var(--s4);align-items:start}
  .pmpro-account main.reading :is(.wp-block-post-content,.pmpro){display:contents}
  .pmpro-account main.reading > *,.pmpro-account main.reading .wp-block-post-content > *,.pmpro-account main.reading .pmpro > *{grid-column:1}
  .pmpro-account main.reading .wp-block-post-content > .acct-art{grid-column:2;grid-row:1 / 5;align-self:stretch;margin:0}
  .pmpro-account .acct-art img{flex:1 1 auto;min-height:0;aspect-ratio:auto;object-position:50% 50%}
  .pmpro-account main.reading .pmpro > #pmpro_account-orders{grid-column:1 / -1}
}
.bl-plan .bl-name dd{font:400 20px/1.15 var(--head)}
.bl-links{list-style:none;margin:var(--s3) 0 0;padding:0}
.bl-links li{padding:9px 0;border-block-start:1px solid var(--grid-2);font-size:15px}
.bl-links li:first-child{border-block-start:0}
@media (min-width:760px){
  /* like the checkout photo: the drawing fills the aside column beside the heading */
  .bl-top{display:grid;grid-template-columns:minmax(0,1fr) 300px;column-gap:var(--s4);align-items:start}
  .bl-top > :not(.bl-draw){grid-column:1}
  .bl-draw{grid-column:2;grid-row:1 / span 4;align-self:stretch;margin:0}
  .bl-draw svg{max-height:none}
  .bl-cardno{grid-template-columns:repeat(3,minmax(0,1fr))}
  .bl-cardno div:first-child{grid-column:auto;border-block-end:0}
  .bl-cardno div + div{border-inline-start:1px solid var(--rule)}
  .bl-cols{grid-template-columns:minmax(0,1fr) 300px;align-items:start}
  .bl .bl-go{width:auto}
}
/* cancel (issue #94): templates/page-membership-cancel.html; the body is inc/cancel-page.php around PMPro's own
   form fields. The design canvas "DTS cancel membership". */
.cn.reading{padding-block:var(--s4) var(--s8)}
.cn .dts-notice{display:none}   /* the page body's seeded notice (dts.php); the footer carries the notice */
.cn :is(p,ul,dl,figure){max-width:none}
.cn-top{padding-block:var(--s2) 0}
.cn-top h1{margin:0 0 var(--s2);text-wrap:balance}
.cn-top h1:focus{outline:0}
.cn .cn-draw{margin:0 0 var(--s4);max-width:420px;border:1.5px solid var(--rule);background:var(--sheet)}
.cn-draw svg{display:block;width:100%;height:auto}
.cn-cols{display:grid;gap:var(--s4);padding-block-start:var(--s4)}
.cn-box{min-width:0;margin:0;border:1.5px solid var(--rule)}
.cn-hd{margin:0;padding:var(--s3);border-block-end:1px solid var(--rule);background:var(--tint);font:400 24px/1.2 var(--head);color:var(--ink)}
.cn-bd{padding:var(--s3)}
.cn-facts{display:grid;margin:0 0 var(--s3);border:1.5px solid var(--rule)}
.cn-facts div{min-width:0;padding:var(--s3);border-block-end:1px solid var(--rule)}
.cn-facts div:last-child{border-block-end:0}
.cn-facts dt{display:block;margin:0}
.cn-facts dd{margin:4px 0 0;font:400 26px/1.1 var(--head);color:var(--ink)}
.cn-facts .cn-date{font:600 18px/1.3 var(--mono);font-variant-numeric:tabular-nums}
.cn-what{list-style:none;margin:0;padding:0}
.cn-what li{position:relative;max-width:62ch;padding:10px 0 10px 22px;border-block-start:1px solid var(--grid-2);color:var(--ink)}
.cn-what li:first-child{padding-block-start:2px;border-block-start:0}
.cn-what li::before{content:"◆";position:absolute;inset-inline-start:2px;top:10px;font-size:11px;line-height:26px;color:var(--link)}
.cn-what li:first-child::before{top:2px}
.cn-act{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center;margin-block-start:18px;padding-block-start:var(--s4);border-block-start:1.5px solid var(--rule)}
.cn .cn-go{flex:1 1 100%;justify-content:center;margin:0;border:0;cursor:pointer}
.cn .cn-keep{display:inline-flex;flex:1 1 100%;align-items:center;justify-content:center;min-height:52px;padding:15px var(--s6);border:1.5px solid var(--ink);border-radius:var(--r-sm);background:var(--sheet);font:600 var(--wp--preset--font-size--lead)/1 var(--sans);color:var(--ink);text-decoration:none}
.cn .cn-keep:hover{background:var(--tint)}
.cn-after{margin:var(--s3) 0 0;color:var(--ink-2)}
.cn-ok,.cn-err{display:flex;flex-wrap:wrap;gap:4px var(--s3);align-items:baseline;margin:0 0 var(--s3);padding:var(--s3);border:1.5px solid var(--calm-ink);background:var(--calm);color:var(--calm-ink)}
.cn-err{border-color:var(--stressed-ink);background:var(--stressed);color:var(--stressed-ink)}
.cn-ok b,.cn-err b{flex:none;font:600 11px/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:inherit}
.cn-side h2{margin:0}
.cn-help{list-style:none;margin:10px 0 0;padding:0;border:1.5px solid var(--rule)}
.cn-help li{padding:11px var(--s3);border-block-end:1px solid var(--rule);font-size:15px}
.cn-help li:last-child{border-block-end:0}
.cn-help span{display:block;font-size:14px;color:var(--ink-2)}
@media (min-width:760px){
  .cn-cols{grid-template-columns:minmax(0,1fr) 300px;align-items:start}
  .cn-facts{grid-template-columns:repeat(3,minmax(0,1fr))}
  .cn-facts div{border-block-end:0;border-inline-end:1px solid var(--rule)}
  .cn-facts div:last-child{border-inline-end:0}
  .cn .cn-go,.cn .cn-keep{flex:0 1 auto}
}
/* privacy (issue #67): templates/page-privacy.html; the page body is seeded by dts.php from
   content/drafts/legal/privacy_v3.md. The design canvas "DTS privacy". */
.pv.reading{padding-block:var(--s4) var(--s8)}
.pv :is(p,ul,ol,figure,table){max-width:none}
.pv h1{margin:0 0 var(--s2)}
.pv-sub{margin:0;font-size:18px;color:var(--ink-2);max-width:60ch}
.pv-meta{display:flex;flex-wrap:wrap;gap:6px 18px;margin:var(--s3) 0 0;padding-block-start:10px;border-block-start:1px solid var(--grid-2);font:500 13px/1.5 var(--mono);letter-spacing:.03em;color:var(--ink)}
.pv-meta span{white-space:nowrap}
.pv-draw{margin:var(--s4) 0 0;border:1.5px solid var(--rule);background:var(--tint)}
.pv-draw img{display:block;width:100%;height:auto}
.pv-draw figcaption{padding:var(--s2) var(--s3);border-block-start:1px solid var(--rule);background:var(--sheet);font:500 12px/1.4 var(--mono);color:var(--ink-2)}
section.pv-brief{margin:18px 0 0;padding:0;border:1.5px solid var(--rule)}
.pv-brief h2{margin:0;padding:var(--s3) 14px;background:var(--ink);font:400 26px/1.15 var(--head);color:var(--sheet)}
.pv-brief ul{list-style:none;display:grid;gap:0 24px;margin:0;padding:4px 14px 6px}
.pv-brief li{position:relative;padding:10px 0 10px 22px;border-block-end:1px solid var(--grid-2);color:var(--ink)}
.pv-brief li:last-child{border-block-end:0}
.pv-brief li::before{content:"◆";position:absolute;inset-inline-start:2px;top:10px;font-size:11px;line-height:26px;color:var(--link)}
.pv-cols{display:grid;gap:18px;padding-block:22px 0}
.pv-toc{align-self:start;border:1.5px solid var(--rule)}
.pv-toc summary{display:flex;align-items:center;min-height:48px;padding:0 14px;background:var(--tint);font:600 15px/1.2 var(--sans);color:var(--ink);cursor:pointer;list-style:none}
.pv-toc summary::-webkit-details-marker{display:none}
/* flex drops the native marker: a chevron shows that the list opens and closes */
.pv-toc summary::after{content:"";width:8px;height:8px;margin:-4px 2px 0 auto;border:solid var(--ink);border-width:0 2px 2px 0;transform:rotate(45deg)}
.pv-toc details[open] summary::after{margin-block-start:4px;transform:rotate(-135deg)}
.pv-toc ol{list-style:none;margin:0;padding:6px 0;border-block-start:1px solid var(--rule)}
.pv-toc a{display:flex;gap:10px;align-items:baseline;min-height:40px;padding:7px 14px;font-size:15px;line-height:1.35;color:var(--ink);text-decoration:none}
.pv-toc a:hover{background:var(--tint);text-decoration:underline}
.pv-toc a b{flex:none;width:22px;font:600 13px/1.35 var(--mono);color:var(--link)}
.pv-doc{min-width:0;max-width:70ch}
.pv-doc section{padding:0 0 22px;margin:0 0 22px;border-block-start:0;border-block-end:1px solid var(--grid-2);scroll-margin-top:var(--s4)}
.pv-doc section:last-child{margin:0;border-block-end:0}
.pv-doc h2{margin:0 0 10px;font:400 28px/1.15 var(--head);color:var(--ink)}
.pv-doc h2 span{margin-inline-end:6px;font:600 22px/1 var(--mono);color:var(--link)}
.pv-doc ul{list-style:none;margin:0 0 var(--s3);padding:0}
.pv-doc ul li{position:relative;padding:4px 0 4px 20px}
.pv-doc ul li::before{content:"";position:absolute;inset-inline-start:3px;top:15px;width:7px;height:7px;background:var(--link);transform:rotate(45deg)}
.pv-tbl{margin:4px 0 14px;border:1.5px solid var(--rule);overflow-x:auto}
.pv-tbl table{width:100%;border-collapse:collapse;font-size:15px;line-height:1.5}
.pv-tbl thead th{padding:10px 12px;border-block-end:1px solid var(--rule);background:var(--tint);text-align:start;font:600 11px/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
.pv-tbl :is(td,tbody th){vertical-align:top;padding:12px;border-block-end:1px solid var(--grid-2);text-align:start}
.pv-tbl tbody th{width:17%;font-weight:600;color:var(--ink)}
.pv-tbl tr:last-child :is(td,th){border-block-end:0}
.pv-prov{margin:4px 0 14px;border:1.5px solid var(--rule)}
.pv-prov div{display:grid;gap:2px;padding:10px 12px;border-block-end:1px solid var(--grid-2);font-size:15px}
.pv-prov div:last-child{border-block-end:0}
.pv-prov dt{font-weight:600;color:var(--ink)}
.pv-prov dd{margin:0}
/* phones: the table becomes one block per row, each cell under its own label */
@media (max-width:699px){
  .pv-tbl{overflow:visible;border:0}
  .pv-tbl :is(table,tbody,tr,td,tbody th){display:block;width:auto}
  .pv-tbl thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .pv-tbl tr{margin:0 0 12px;border:1.5px solid var(--rule)}
  .pv-tbl td{padding:8px 12px}
  .pv-tbl tbody th{padding:8px 12px;border-block-end:1px solid var(--rule);background:var(--tint);font-size:16px}
  .pv-tbl td::before{content:attr(data-l);display:block;margin-block-end:2px;font:600 11px/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
}
@media (min-width:760px){
  /* like the checkout photo: the drawing fills the aside column beside the title, the summary and the brief */
  .pv.reading{display:grid;grid-template-columns:minmax(0,1fr) 300px;column-gap:18px;align-items:start}
  .pv .wp-block-post-content{display:contents}
  .pv.reading > *,.pv .wp-block-post-content > *{grid-column:1}
  .pv .wp-block-post-content > .pv-draw{grid-column:2;grid-row:1 / span 4;margin:0}
  .pv .wp-block-post-content > .pv-cols{grid-column:1 / -1;grid-template-columns:260px minmax(0,1fr);column-gap:32px}
  .pv-brief ul{grid-template-columns:1fr 1fr}
  .pv-brief li:nth-last-child(2){border-block-end:0}
  .pv-prov div{grid-template-columns:150px 1fr;gap:12px}
}
/* confirmation (issue #95): templates/page-membership-confirmation.html; the body is inc/confirmation-page.php in
   place of PMPro's receipt. The design canvas "DTS membership confirmation". */
.reading.cf{padding-block:var(--s8) var(--s12)}
.reading.cf :is(.cf-draw,.cf-terms,.cf-steps,.cf-pages,.cf-dia p){max-width:none}
.cf-top{padding-block:0}
.cf-top h1{margin:0 0 var(--s3)}
.cf-sub{max-width:60ch;margin:0;font-size:var(--wp--preset--font-size--lead)}
.cf .cf-cols{display:grid;gap:var(--s6);margin-block-start:0;padding-block-start:var(--s6)}
.cf-main,.cf-side{display:flex;flex-direction:column;gap:var(--s6);min-width:0}
.cf-side > p{margin:0}
.cf-box{min-width:0;margin:0;padding:0;border:1.5px solid var(--rule)}
.cf-hd{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center;justify-content:space-between;margin:0;padding:var(--s3) var(--s4);border-block-end:1px solid var(--rule);background:var(--tint);font:400 var(--wp--preset--font-size--subheading)/1.15 var(--head);color:var(--ink)}
.cf-hd h2{margin:0;font:inherit;color:inherit}
.cf-draw{margin:0;padding:var(--s4) var(--s4) var(--s2)}
.cf-draw svg{display:block;width:100%;height:auto;font-family:var(--mono)}
.cf-draw .cf-dw-n{display:none}
.cf-draw text{font-size:11px;fill:var(--ink-2)}
.cf-draw .cf-k{letter-spacing:1px}
.cf-draw .cf-dim{font-size:12px;font-weight:600;letter-spacing:1.2px;fill:var(--ink)}
.cf-draw .cf-d{font-size:12px;fill:var(--ink)}
.cf-draw .cf-p{font-size:14px;font-weight:600;fill:var(--ink)}
@media (max-width:699px){.cf-draw .cf-dw-w{display:none}.cf-draw .cf-dw-n{display:block}}
.cf-tb{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin:0;border-block-start:1.5px solid var(--rule)}
.cf-tb div{min-width:0;padding:var(--s3) var(--s4);overflow-wrap:anywhere;border-inline-end:1px solid var(--rule);border-block-end:1px solid var(--rule)}
.cf-tb div:nth-child(2n){border-inline-end:0}
.cf-tb div:nth-last-child(-n+2){border-block-end:0}
.cf-tb dt{display:block;margin:0}
.cf-tb dd{margin:2px 0 0;color:var(--ink)}
.cf-tb dd b{display:block;font-weight:500}
.cf-tb dd span,.cf-tb dd a{font-size:14px}
.cf-tb dd span{color:var(--ink-2)}
.cf-tb .cf-num{font:600 22px/1.3 var(--mono);font-variant-numeric:tabular-nums}
.cf-terms{margin:0;padding:var(--s3) var(--s4);border-block-start:1px solid var(--rule);font-size:15px;color:var(--ink)}
.cf-terms b{font-weight:500}
.cf-steps{list-style:none;margin:0;padding:0;counter-reset:cf}
.cf-steps li{display:grid;grid-template-columns:40px minmax(0,1fr);gap:0 var(--s3);padding:var(--s4);border-block-end:1px solid var(--rule);overflow-wrap:anywhere;counter-increment:cf}
.cf-steps li:last-child{border-block-end:0}
.cf-steps li::before{content:counter(cf);grid-row:span 2;font:600 22px/1.2 var(--mono);color:var(--link)}
.cf-steps b{margin-block-end:4px;font-weight:500}
.cf-steps p{margin:0;max-width:60ch}
.cf-act{display:flex;flex-wrap:wrap;gap:var(--s3) var(--s6);align-items:center}
.cf .cf-act .gate{margin:0}
.cf-dia .cf-hd{background:var(--ink);color:var(--sheet)}
.cf-dia p{margin:0;padding:var(--s3) var(--s4);font-size:15px;color:var(--ink)}
.cf-dia .cf-dia-up{border-block-start:1px solid var(--rule);background:var(--tint);font-size:14px;color:var(--ink-body)}
.cf-pages{list-style:none;margin:0;padding:0;font-size:15px}
.cf-pages li{padding:var(--s3) var(--s4);border-block-end:1px solid var(--grid-2)}
.cf-pages li:last-child{border-block-end:0}
.cf-pages a{font-weight:500}
.cf-pages span{display:block;font-size:13px;color:var(--ink-2)}
.cf-welcome{display:flex;flex-direction:column;justify-content:space-between;gap:24px;aspect-ratio:2/3;padding:32px 24px 28px;background:var(--wp--preset--color--diamond-navy);color:var(--sheet)}
.cf-welcome img{display:block;width:100%;height:auto}
.cf-welcome p{margin:0}
.cf-welcome .cf-welcome-t{font-family:var(--head);font-weight:400;font-size:var(--wp--preset--font-size--display);line-height:1.05}
.cf-welcome .cf-welcome-s{margin-block-start:10px;font-size:var(--wp--preset--font-size--lead);line-height:1.3;color:var(--tint)}
@media (max-width:759px){
  .cf-welcome{flex-direction:row;align-items:center;justify-content:flex-start;aspect-ratio:auto;padding:24px 20px}
  .cf-welcome img{flex:0 0 112px;width:112px}
  .cf-welcome .cf-welcome-t{white-space:nowrap}
}
@media (min-width:760px){
  .cf-cols{grid-template-columns:minmax(0,1fr) 300px;align-items:start}
  .cf-tb{grid-template-columns:repeat(4,minmax(0,1fr))}
  .cf-tb div{border-block-end:0}
  .cf-tb div:nth-child(2n){border-inline-end:1px solid var(--rule)}
  .cf-tb div:last-child{border-inline-end:0}
}
/* levels (issue #96): templates/page-membership-levels.html; the body is inc/levels-page.php. The design canvas
   "DTS membership levels". The drawing and the plan cards share one column split, so their edges line up. */
.lv.reading{padding-block:var(--s4) var(--s8)}
.lv .dts-notice{display:none}   /* the page body's seeded notice (dts.php); the footer carries the notice */
.lv :is(p,ul,figure){max-width:none}
.lv-top{padding:0}
.lv-top .t-label{margin:0}
.lv-top h1{margin:0 0 var(--s1)}
.lv .lv-sub{margin:0;font-size:18px;color:var(--ink-2);max-width:60ch}
.lv-draw{margin:0}
.lv-draw svg{display:block;width:100%;height:auto}
.lv-draw figcaption{margin-block-start:6px}
/* phone: one stack, in the order title, drawing, DTS card, upgrade box, Diamond card */
.lv-plans{display:flex;flex-direction:column;gap:18px;padding-block:var(--s2)}
.lv-col{display:contents}
.lv-plans .lv-draw{order:1}
.lv-plans .lv-open{order:2}
.lv-plans .lv-card:not(.lv-open){order:3}
.lv-plans .lv-dia{order:4}
.lv-card{padding:0;border:1.5px solid var(--rule);background:var(--sheet);min-width:0}
.lv-card + .lv-card{border-block-start:1.5px solid var(--rule)}
.lv-open{box-shadow:0 10px 22px -16px rgba(0,40,104,.5)}
.lv-hd{display:flex;justify-content:space-between;align-items:center;gap:var(--s3);padding:var(--s3);border-block-end:1px solid var(--rule);background:var(--tint)}
.lv-hd h2{margin:0;font:400 28px/1.1 var(--head);color:var(--ink)}
.lv-open .lv-hd{background:var(--ink);border-block-end-color:var(--ink)}
.lv-open .lv-hd h2{color:var(--sheet)}
.lv-open .lv-hd .tag.today{background:var(--sheet);color:var(--ink);border-color:var(--sheet)}
.lv-price{display:grid;grid-template-columns:1fr 1fr;border-block-end:1px solid var(--rule)}
.lv-price div{padding:var(--s3)}
.lv-price div + div{border-inline-start:1px solid var(--rule)}
.lv-price .t-label{display:block}
.lv-price b{display:block;margin-block-start:2px;font:400 26px/1.1 var(--head);color:var(--ink)}
.lv-price em{font-style:normal;color:var(--link)}
.lv-bd{padding:var(--s3)}
.lv-bd h3{margin:0 0 6px}
.lv-lead{margin:0 0 var(--s3);font-size:15px}
.lv-get{list-style:none;margin:0;padding:0;border-block-start:1px solid var(--grid-2)}
.lv-get li{position:relative;padding:9px 0 9px 22px;border-block-end:1px solid var(--grid-2);font-size:15px;color:var(--ink)}
.lv-get li::before{content:"◆";position:absolute;inset-inline-start:2px;top:9px;font-size:11px;line-height:23px;color:var(--link)}   /* a glyph, not the logo */
.lv-get li span{display:block;font-size:13px;color:var(--ink-2)}
.lv-get .tag{float:right;margin:2px 0 4px var(--s2);padding:4px 6px;font-style:normal}
.lv .gate{display:flex;justify-content:center}
.lv-after{margin:10px 0 0;color:var(--ink-2)}
.lv-up .lv-lead{margin:0}
.lv .gate-2{margin-block-start:var(--s3);background:var(--sheet);color:var(--ink)!important;border:1.5px solid var(--ink);font-size:16px;padding:12px 22px;min-height:44px}
.lv .gate-2:hover{background:var(--tint)}
.lv-cost{margin:var(--s3) calc(-1 * var(--s3)) 0;padding:10px var(--s3);border-block:1px solid var(--rule);background:var(--tint);font-size:15px}
.lv-cost b,.lv-cost small{display:block}
.lv-cost small{margin-block-start:2px;font-size:13px;color:var(--ink-2)}
.lv-help{margin:6px 0 0;color:var(--ink-2)}
@media (min-width:760px){
  /* title beside the drawing, then the two plan cards level at the top. The upgrade box sits under the DTS card;
     the last row takes any extra height, so a taller Diamond card leaves no gap above the upgrade box. */
  .lv-plans{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);grid-template-rows:auto auto 1fr;gap:18px;align-items:start}
  .lv-plans .lv-top{grid-area:1/1}
  .lv-plans .lv-draw{grid-area:1/2}
  .lv-plans .lv-dts{grid-area:2/1}
  .lv-plans .lv-up{grid-area:3/1}
  .lv-plans .lv-dia{grid-column:2;grid-row:2/span 2}
}

/* sign-in (issue #97): templates/page-login.html around PMPro's own [pmpro_login] forms (sign in, forgot password,
   new password, signed in), patterns/login-top.php and login-aside.php; functions.php re-words it. The design
   canvas "DTS member sign-in". */
.li.reading{padding-block:var(--s4) var(--s8)}
.li-top{padding-block:var(--s2) 0}
.li-top .t-label{margin:0}
.li-top h1{margin:var(--s1) 0 var(--s2)}
.li-sub{max-width:52ch;margin:0;font-size:18px;color:var(--ink-2)}
.li-cols{display:grid;gap:var(--s4);padding-block-start:var(--s4)}
.li .li-cols :is(p,figure){max-width:none}
.li .pmpro{color:var(--ink-body)}   /* PMPro's variation_1.css sets #222 on .pmpro */
.li .pmpro_section{margin:0;padding:0}
.li .pmpro_card{margin:0;padding:0;border:1.5px solid var(--rule);border-radius:0;box-shadow:none;background:var(--sheet)}
.li .pmpro_card_content{display:flex;flex-direction:column;padding:var(--s3)}
.li .pmpro_card_actions{padding:0 var(--s3) var(--s3);border:0;background:none;font-size:14px}
.li :is(#loginform p,.pmpro_form_field){display:grid;gap:var(--s1);margin:0 0 var(--s3)}
.li :is(#loginform label,.pmpro_form_label){font:600 15px/1.3 var(--sans);color:var(--ink)}
.li .pmpro_asterisk{color:var(--ink-2)}
.li .pmpro_asterisk abbr{text-decoration:none}
.li :is(#loginform .input,.pmpro_form_input){width:100%;min-height:48px;padding:12px;font:400 17px/1.3 var(--sans);color:var(--ink);background:var(--sheet);border:1.5px solid var(--ink-2);border-radius:var(--r-sm);box-shadow:none}
.li :is(#loginform .input,.pmpro_form_input):focus{outline:3px solid var(--link);outline-offset:1px;border-color:var(--ink)}
.li #loginform .login-remember{margin:0}
.li #loginform .login-remember label{display:flex;gap:var(--s3);align-items:center;min-height:44px;font:400 16px/1.4 var(--sans);cursor:pointer}
.li .login-remember input{flex:none;width:22px;height:22px;margin:0;accent-color:var(--ink)}
.li :is(.login-submit,.pmpro_form_submit){margin:var(--s2) 0 0}
.li :is(#wp-submit,.pmpro_btn-submit){width:100%;min-height:52px;padding:var(--s4) var(--s6);background:var(--ink);color:var(--sheet);border:0;border-radius:var(--r-sm);font:600 18px/1 var(--sans);cursor:pointer;transition:background .15s}
.li :is(#wp-submit,.pmpro_btn-submit):hover{background:var(--hover)}
.li .pmpro_form_field-password-toggle{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--s2)}
.li .pmpro_form_field-password-toggle button{display:inline-flex;align-items:center;min-height:44px;padding:6px 0;background:none;border:0;color:var(--link);font:500 14px/1 var(--sans);text-decoration:underline;text-underline-offset:.2em;cursor:pointer}
.li .pmpro_form_field-password-toggle .pmpro_icon{display:none}
/* PMPro hides the words on phones and shows only the eye; we hide the eye, so keep the words */
.li .pmpro_form_field-password-toggle .pmpro_form_field-password-toggle-state{position:static;width:auto;height:auto;margin:0;clip:auto;clip-path:none;overflow:visible;white-space:nowrap}
.li .li-back{margin-top:var(--s2)}
.li .pmpro_cols-2{display:block}
.li .pmpro_form_hint{margin:0 0 var(--s2);font-size:14px;color:var(--ink-2)}
.li #pass-strength-result{margin:0 0 var(--s3);padding:6px 10px;border:1px solid var(--grid-2);font:500 13px/1.4 var(--mono);color:var(--ink)}
.li #pass-strength-result:is(.short,.bad){border-color:var(--stressed-ink);background:var(--stressed);color:var(--stressed-ink)}
.li #pass-strength-result.good{border-color:var(--unsettled-ink);background:var(--unsettled);color:var(--unsettled-ink)}
.li #pass-strength-result.strong{border-color:var(--calm-ink);background:var(--calm);color:var(--calm-ink)}
.li :is(.pmpro_lost_password-instructions,.pmpro_spacer){display:none}   /* the heading's line says it */
.li .pmpro_message{margin:0 0 var(--s4);padding:var(--s3);border:1.5px solid var(--ink);border-radius:0;background:var(--tint);color:var(--ink);font-size:16px}
.li .pmpro_message.pmpro_success{border-color:var(--calm-ink);background:var(--calm);color:var(--calm-ink)}
.li .pmpro_message.pmpro_error{border-color:var(--stressed-ink);background:var(--stressed);color:var(--stressed-ink)}
.li .pmpro_message a{color:inherit}   /* the link colour fails contrast on the status tints */
.li .pmpro_actions_nav{display:flex;flex-wrap:wrap;gap:0 var(--s3);color:var(--grid-2)}
.li .pmpro_actions_nav a{display:inline-flex;align-items:center;min-height:44px;color:var(--link)}
.li .pmpro_logged_in_welcome_wrap{padding:var(--s3)}
.li .pmpro_logged_in_welcome_wrap .avatar{display:none}

/* the join card sits under the form; the aside: phones show help, photo; wide screens put the photo (not a link) first, so Tab order stays */
.li :is(.li-main,.li-side){display:flex;flex-direction:column;gap:var(--s4)}
.li .li-main > *{margin:0}
.li-help{padding:var(--s3);border:1px solid var(--grid-2);background:var(--tint)}
.li-help h2{margin:0;font:600 15px/1.3 var(--sans);color:var(--ink)}
.li-help p{margin:6px 0 0;font-size:14px}
.li-join{margin:0;background:var(--sheet)}
.li-join-hd{padding:var(--s3) var(--s3) 11px;background:var(--ink);color:var(--sheet)}
.li-join-hd .t-label{display:block;color:var(--grid-2)}
.li-join-hd h2{margin:5px 0 0;font:400 22px/1.1 var(--head);color:var(--sheet)}
.li-join-bd{padding:var(--s3)}
.li-join-bd p{margin:0 0 var(--s2);font-size:15px}
.li-join-bd .t-data{color:var(--ink)}
.li a.li-go{display:flex;align-items:center;justify-content:center;min-height:48px;margin-block-start:var(--s3);padding:0 var(--s4);border:1.5px solid var(--ink);border-radius:var(--r-sm);background:var(--sheet);color:var(--ink);font:500 16px/1 var(--sans);text-decoration:none}
.li a.li-go:hover{background:var(--ink);color:var(--sheet)}
.li .li-photo{margin:0;border:1.5px solid var(--rule);background:var(--tint)}
.li-photo img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover}
@media (min-width:760px){
  .li-cols{grid-template-columns:minmax(0,520px) 300px;justify-content:space-between;align-items:start}
  .li .li-photo{order:-1}
}

/* orders (issue #99): templates/page-membership-orders.html, patterns/orders-top.php, then stock PMPro [pmpro_invoice]
   (the order list, or one order), CSS only. The design canvas "DTS membership orders". */
.or.reading{padding-block:var(--s4) var(--s8)}
.pmpro-invoice .dts-notice{display:none}   /* the page body's seeded notice (dts.php); the footer carries the notice */
.pmpro-invoice .reading :is(p,ul,figure,table){max-width:none}
.or-top .t-label{margin:0}
.or-top h1{margin:var(--s1) 0 var(--s2)}
.or-plate{margin:var(--s3) 0 0;border:1.5px solid var(--rule);background:var(--tint)}
.or-plate svg{display:block;width:100%;height:auto;max-height:150px}   /* small on a phone so the orders stay near the top */
.or-beta{display:grid;grid-template-columns:1fr 1fr;margin-block-start:var(--s4)}
.or-beta div{padding:var(--s3);border-inline-end:1px solid var(--rule);border-block-end:1px solid var(--rule)}
.or-beta div:nth-child(2){border-inline-end:0}
.or-beta div:nth-child(3){grid-column:1 / -1;border:0}
.or-beta .t-label{display:block}
.or-beta b{display:block;margin-block-start:2px;font:400 24px/1.15 var(--head);color:var(--ink)}
.or-beta em{font-style:normal;color:var(--link)}
.or-beta small{display:block;margin-block-start:var(--s1)}
.pmpro-invoice .pmpro{max-width:760px;padding-block-start:var(--s4)}
.pmpro-invoice .pmpro_section{margin:0 0 var(--s4);padding:0}
.pmpro-invoice .pmpro_section_title{margin:0 0 10px;font:400 26px/1.15 var(--head);color:var(--ink)}
.pmpro-invoice .pmpro_card{display:flex;flex-direction:column;margin:0;padding:0;border:1.5px solid var(--rule);border-radius:0;box-shadow:none;background:var(--sheet)}
.pmpro-invoice .pmpro_card_title{order:-1;display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s2) var(--s3);margin:0;padding:var(--s3);border-block-end:1px solid var(--rule);background:var(--tint);font:400 24px/1.2 var(--head);color:var(--ink)}
.pmpro-invoice .pmpro_card_content{padding:var(--s3);border:0;background:none}
.pmpro-invoice #pmpro_order_list .pmpro_card_content{padding:0 var(--s3);overflow-x:auto}
.pmpro-invoice .pmpro_spacer{display:none}
/* the print button and PMPro's other order links, under the title */
.pmpro-invoice .pmpro_card_actions{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:var(--s1) 18px;padding:10px var(--s3);border:0;border-block-end:1px solid var(--grid-2);background:none;font-size:15px}
.pmpro-invoice .pmpro_card_action_separator{display:none}
.pmpro-invoice .pmpro_btn-print{min-height:44px;padding:0 var(--s4);background:var(--sheet);color:var(--ink);border:1.5px solid var(--ink);border-radius:var(--r-sm);font:600 12px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;cursor:pointer}
.pmpro-invoice .pmpro_btn-print:hover{background:var(--ink);color:var(--sheet)}
/* the order's facts: two to a row on wide screens */
.pmpro-invoice #pmpro_order_single-meta .pmpro_list{display:grid;gap:var(--s3) var(--s6);margin:0;padding:0;list-style:none}
.pmpro-invoice #pmpro_order_single-meta .pmpro_list .pmpro_list_item{display:block;width:auto;margin:0;padding:0;border:0;color:var(--ink);font-size:16px;overflow-wrap:anywhere}
.pmpro-invoice .pmpro_list_item_label{display:block;margin-block-end:2px;font:var(--wp--custom--type--label--weight) var(--wp--custom--type--label--size)/var(--wp--custom--type--label--line-height) var(--wp--custom--type--label--family);letter-spacing:var(--wp--custom--type--label--letter-spacing);text-transform:var(--wp--custom--type--label--transform);color:var(--ink-2)}
.or-test{display:flex;gap:var(--s3);align-items:baseline;margin:var(--s3) 0 0;padding:10px var(--s3);border:1.5px dashed var(--ink-2);background:var(--tint);font-size:15px;color:var(--ink)}
.or-test b{font:600 11px/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);white-space:nowrap}
.pmpro-invoice #pmpro_order_single-items h3{margin:var(--s4) 0 0;font:400 22px/1.2 var(--head);color:var(--ink)}
.pmpro-invoice #pmpro_order_single-items .pmpro_list:has(.pmpro_tag-discount-code){display:none}   /* the code a member used stays private */
/* tables: the order list and the order's one line */
.pmpro-invoice .pmpro_table{width:100%;margin-block-start:var(--s3);border-collapse:collapse;font-size:16px}
.pmpro-invoice #pmpro_order_list .pmpro_table{margin:0}
.pmpro-invoice .pmpro_table :is(th,td){padding:11px var(--s3) 11px 0;border:0;border-block-end:1px solid var(--grid-2);background:none;text-align:start;vertical-align:baseline;color:var(--ink)}
.pmpro-invoice .pmpro_table thead th{font:600 11px/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);border-block-end-color:var(--rule)}
.pmpro-invoice .pmpro_table tbody th{font-weight:500}
.pmpro-invoice .pmpro_table tbody tr:last-child > *{border-block-end:0}
.pmpro-invoice .pmpro_table tbody th p{margin:2px 0 0;font:400 14px/1.5 var(--sans);color:var(--ink-2)}
.pmpro-invoice :is(.pmpro_table_order-date,.pmpro_table_order-amount),.pmpro-invoice #pmpro_order_single-items td{font:500 15px/1.5 var(--mono);letter-spacing:.02em;white-space:nowrap}
.pmpro-invoice #pmpro_order_single-items :is(th,td):last-child{padding-inline-end:0;text-align:end}
.pmpro-invoice .pmpro_table tfoot td{border-block-start:1px solid var(--rule);border-block-end:0}
.pmpro-invoice .pmpro_table tfoot tr:last-child td{font-weight:600}
.pmpro-invoice .pmpro_table_order-date a{display:inline-flex;align-items:center;min-height:44px}
.pmpro-invoice .pmpro_tag{display:inline-block;padding:6px 8px;border:1.5px solid var(--ink);border-radius:2px;background:var(--sheet);font:600 11px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--ink);white-space:nowrap}
.pmpro-invoice .pmpro_tag-success{background:var(--calm);border-color:var(--calm-ink);color:var(--calm-ink)}
.pmpro-invoice .pmpro_tag-alert{background:var(--unsettled);border-color:var(--unsettled-ink);color:var(--unsettled-ink)}
.pmpro-invoice .pmpro_tag-error{background:var(--stressed);border-color:var(--stressed-ink);color:var(--stressed-ink)}
.pmpro-invoice .pmpro_actions_nav{display:flex;flex-wrap:wrap;gap:var(--s1) 18px;margin:0;font-size:15px}
.pmpro-invoice .pmpro_actions_nav a{display:inline-flex;align-items:center;min-height:44px;font-weight:500}
@media (min-width:760px){
  /* like the checkout photo: the drawing fills the aside column beside the heading */
  .or-top{display:grid;grid-template-columns:minmax(0,1fr) 300px;column-gap:var(--s4);align-items:start}
  .or-top > :not(.or-plate){grid-column:1}
  .or-plate{grid-column:2;grid-row:1 / span 4;align-self:stretch;display:flex;align-items:center;margin:0}
  .or-plate svg{max-height:260px}
  .or-beta{grid-template-columns:repeat(3,minmax(0,1fr))}
  .or-beta div{border-block-end:0}
  .or-beta div:nth-child(2){border-inline-end:1px solid var(--rule)}
  .or-beta div:nth-child(3){grid-column:auto}
  .pmpro-invoice #pmpro_order_single-meta .pmpro_list{grid-template-columns:1fr 1fr}
}
/* print: the receipt only, with the brand line and the footer notice */
@media print{
  @page{margin:.75in}
  .pmpro-invoice .wp-site-blocks{margin:0;padding:0;border:0;box-shadow:none;max-width:none}
  .pmpro-invoice :is(nav.main,.or-top,.pmpro_card_actions,.pmpro_actions_nav,.site-foot .links,.skip-link){display:none}
  .pmpro-invoice .site-head{border-block-end-width:1px}
  .pmpro-invoice .or.reading{padding-block:var(--s3) var(--s4)}
  .pmpro-invoice .pmpro{max-width:none;padding:0}
  .pmpro-invoice .pmpro_card{break-inside:avoid}
  .pmpro-invoice :is(.pmpro_card_title,.or-test,.pmpro_tag){print-color-adjust:exact}
}

/* member profile (issue #98): templates/page-member-profile.html, patterns/profile-top.php and profile-side.php around
   PMPro's own [pmpro_member_profile_edit] form (two views: the profile, and ?view=change-password), re-worded in
   functions.php. The design canvas "DTS member profile". */
.pf.reading{padding-block:var(--s4) var(--s8)}
.pf .dts-notice{display:none}   /* the page body's seeded notice (dts.php); the footer carries the notice */
.pf .pf-cols :is(p,ul,figure){max-width:none}
.pf-top{padding-block:var(--s2) 0}
.pf-top .t-label,.pf-crumb{margin:0}
.pf-crumb{font-size:14px}
.pf-top h1{margin:var(--s1) 0 var(--s2)}
.pf-top .sub{margin:0;font-size:18px;color:var(--ink-2)}
.pf-user{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s1) var(--s3);margin:var(--s3) 0 0;padding:10px var(--s3);border:1px solid var(--grid-2);background:var(--tint);font-size:14px;color:var(--ink-2)}
.pf-user b{color:var(--ink);overflow-wrap:anywhere}
.pf .pf-plate{margin:var(--s3) 0 0;max-width:240px;border:1.5px solid var(--rule);background:var(--tint)}   /* small on a phone: the form comes first */
.pf-plate svg{display:block;width:100%;height:auto}
.pf-cols{display:grid;gap:var(--s4);padding-block-start:var(--s4)}
.pf .pmpro_section,.pf .pmpro_section_content{margin:0;padding:0}
.pf .pmpro_card{margin:0 0 var(--s4);padding:0;border:1.5px solid var(--rule);border-radius:0;box-shadow:none;background:var(--sheet)}
.pf .pmpro_card_content{padding:0;border:0;background:none}
.pf .pmpro_section:has(.pmpro_form) .pmpro_card_content{padding-top:0}   /* PMPro's own rule here is stronger than the one above */
.pf .pmpro_form_fieldset{margin:0;padding:0;border:0;min-width:0}
.pf .pmpro_form_legend{float:left;width:100%;margin:0;padding:var(--s3);border-block-end:1px solid var(--rule);background:var(--tint)}   /* float: a legend fills the width only so */
.pf .pmpro_form_heading{margin:0;font:400 24px/1.2 var(--head);color:var(--ink)}
.pf .pmpro_form_fields{clear:both;display:flex;flex-direction:column;gap:var(--s3);padding:var(--s3)}
.pf .pmpro_cols-2{display:grid;gap:var(--s3)}
.pf .pmpro_cols-2 > *{width:auto}   /* PMPro sizes these as half-width flex items */
.pf .pmpro_form_field{display:grid;gap:var(--s1);margin:0;min-width:0}
.pf .pmpro_form_field.pmpro_form_field-display_name{display:none}   /* PMPro needs it to save; DTS does not show a public name */.pf .pmpro_form_label{font:600 15px/1.3 var(--sans);color:var(--ink)}
.pf .pmpro_asterisk{color:var(--ink-2)}
.pf .pmpro_form_input{width:100%;min-height:48px;padding:12px;font:400 17px/1.3 var(--sans);color:var(--ink);background:var(--sheet);border:1.5px solid var(--ink-2);border-radius:var(--r-sm);box-shadow:none}
.pf .pmpro_form_input:focus{outline:3px solid var(--link);outline-offset:1px;border-color:var(--ink)}
.pf .pmpro_form_input[readonly]{background:var(--tint)}
.pf :is(.pmpro_form_hint,.pf-help){margin:0;font-size:14px;color:var(--ink-2)}
.pf .pf-help{padding:0 var(--s3) var(--s3)}
.pf .pmpro_form_field p.pf-help{margin:0;padding:0}   /* moved under the email field by a footer script (functions.php) */
.pf .pmpro_form_field-password-toggle{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:0 var(--s3)}
.pf .pmpro_btn-password-toggle{min-height:44px;padding:6px 0;background:none;border:0;color:var(--link);font:500 14px/1 var(--sans);cursor:pointer}
/* WordPress's strength meter: the word carries the meaning; the colour only backs it up */
.pf #pass-strength-result{margin:0;padding:8px var(--s3);border:1.5px solid var(--ink-2);background:var(--sheet);font-size:14px;color:var(--ink)}
.pf #pass-strength-result:is(.short,.bad){border-color:var(--stressed-ink);background:var(--stressed);color:var(--stressed-ink)}
.pf #pass-strength-result.good{border-color:var(--unsettled-ink);background:var(--unsettled);color:var(--unsettled-ink)}
.pf #pass-strength-result.strong{border-color:var(--calm-ink);background:var(--calm);color:var(--calm-ink)}
.pf .pmpro_form_submit{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3) var(--s6);margin:0;padding:var(--s3);border-block-start:1px solid var(--grid-2)}
.pf :is(.pmpro_btn-submit-update-profile,.pmpro_btn-submit-change-password){width:100%;min-height:52px;padding:var(--s4) var(--s6);background:var(--ink);color:var(--sheet);border:0;border-radius:var(--r-sm);font:600 18px/1 var(--sans);cursor:pointer;transition:background .15s}
.pf :is(.pmpro_btn-submit-update-profile,.pmpro_btn-submit-change-password):hover{background:var(--hover)}
.pf .pmpro_btn-cancel{min-height:44px;padding:6px 0;background:none;border:0;color:var(--link);font:400 16px/1 var(--sans);text-decoration:underline;text-underline-offset:.2em;cursor:pointer}
.pf .pmpro_message{margin:0 0 var(--s4);padding:var(--s3);border:1.5px solid var(--ink);border-radius:0;background:var(--tint);color:var(--ink)}
.pf .pmpro_message.pmpro_success{border-color:var(--calm-ink);background:var(--calm);color:var(--calm-ink)}
.pf .pmpro_message.pmpro_error{border-color:var(--stressed-ink);background:var(--stressed);color:var(--stressed-ink)}
.pf .pmpro_message a{color:inherit;font-weight:600}
/* the aside */
.pf-side h2{margin:0;font:400 24px/1.2 var(--head);color:var(--ink)}
.pf-pw{margin:0 0 var(--s4);padding:var(--s3)}
.pf-pw p{margin:var(--s2) 0 var(--s3);font-size:15px;color:var(--ink-2)}
.pf-btn{display:inline-flex;align-items:center;min-height:48px;padding:0 var(--s6);background:var(--sheet);color:var(--ink);border:1.5px solid var(--ink);border-radius:var(--r-sm);font:600 12px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;text-decoration:none}
.pf-btn:hover{background:var(--ink);color:var(--sheet)}
.pf-side .co-get li span{display:block;font-size:13px;color:var(--ink-2)}
.pf-q{margin:var(--s3) 0 0;font-size:15px;color:var(--ink-2)}
@media (min-width:760px){
  .pf-top{display:grid;grid-template-columns:minmax(0,1fr) 300px;column-gap:var(--s4);align-items:start}
  .pf-top > :not(.pf-plate){grid-column:1}
  .pf .pf-plate{grid-column:2;grid-row:1 / 6;max-width:none;margin:0}
  .pf-cols{grid-template-columns:minmax(0,1fr) 300px;align-items:start}
  .pf .pmpro_cols-2{grid-template-columns:1fr 1fr}
  .pf :is(.pmpro_btn-submit-update-profile,.pmpro_btn-submit-change-password){width:auto}
}


/* ---------- home page v2 (#152): header, hero, section rhythm ---------- */
/* header: sign-in stays on the brand line; on phones the nav is one line that scrolls sideways */
.site-head{flex-wrap:nowrap}
.site-head .brand{min-width:0}
.site-head .signin{white-space:nowrap}
@media (max-width:759px){
  nav.main{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;white-space:nowrap}
  nav.main::-webkit-scrollbar{display:none}
}
/* the home page sheet is wider, so the workflow diagram has room (1180 px, as the approved mock) */
.home .wp-site-blocks{max-width:1180px}
@media (min-width:760px){.home .wp-site-blocks > *{padding-inline:32px}}
/* sections on the home page: 20 px apart */
.home main > section{padding-block:10px}
.home main > section + section{border-block-start:0}
.home main > section.hero{padding-block:var(--s6) 10px}
#record caption{caption-side:bottom;text-align:start;padding:8px 10px;border-block-start:1px solid var(--grid-2)}

/* hero: text left; a small chart over a condensed strategies box right. sheet.js sets --h1h, --leadgap and --gateb
   so the chart ends level with the h1 and the box spans from the lead text to the Join button. */
.hero{display:grid;gap:20px}
.hero h1{max-width:7.8em}   /* four lines, as the mock: the chart beside it takes the h1's height */
.hero .cta .signup p{margin:0}
.hero .gate{margin-block-start:var(--s4)}
.hero :is(.invite-note,.see-plans){margin:6px 0 0;font:400 12px/1.45 var(--mono);letter-spacing:0}
.hero .cta .signup .see-plans{margin-block-start:6px}
.hero .drawing{margin:0;display:flex;flex-direction:column;min-width:0}
.hero .drawing .head{background:var(--rule);align-items:baseline;padding:7px 10px;border:0}
.hero .drawing .head b{font:500 16px/1.2 var(--head);color:var(--sheet)}
.hero .drawing .head .t-label{color:#cfe3f5}
.hero .plot{padding:4px 4px 2px}
.hero .plot svg{height:200px;touch-action:auto}
.hero .plot text{font-family:var(--mono)}
.hero .callout{margin:0;display:grid;gap:3px;padding:9px 12px;border:1px solid #c9d3e3}
.hero .callout > b{font-size:17px}
.hero .callout p{margin:0;font-size:13px;line-height:1.35}
.hero .trio{margin:4px 0 0;display:grid;font-size:13px;line-height:1.3}
.hero .trio li{padding:3px 0;border-block-start-color:#c9d3e3}
@media (min-width:760px){
  .hero{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"copy draw" "copy more";grid-template-rows:auto minmax(0,1fr);column-gap:32px;row-gap:var(--leadgap,12px);align-items:stretch}
  .hero .copy{grid-area:copy;align-content:start}
  .hero .drawing{grid-area:draw;height:var(--h1h,auto)}
  .hero .callout{grid-area:more;align-self:start;min-height:var(--gateb,auto);grid-template-rows:auto auto 1fr}
  .hero .plot{flex:1 1 0;min-height:0}
  .hero .plot svg{height:100%}
  .hero .trio{grid-auto-rows:1fr}
  .hero .trio li{display:grid;align-content:center}
}
@media (prefers-reduced-motion:no-preference){
  .dvi-line{stroke-dasharray:1;stroke-dashoffset:1;animation:dviDraw 2.4s cubic-bezier(.22,1,.36,1) .3s forwards}
  .dvi-late{opacity:0;animation:dviFade .6s ease-out 2.4s forwards}
  .plot svg.drawn .dvi-line,.plot svg.drawn .dvi-late{animation:none;stroke-dashoffset:0;opacity:1}
  @keyframes dviDraw{to{stroke-dashoffset:0}}
  @keyframes dviFade{to{opacity:1}}
}

/* ---------- "How one decision is made" (#152): patterns/workflow.php, assets/workflow.js ---------- */
.wf{--hair:#c9d3e3;--ease:cubic-bezier(.22,1,.36,1)}
.wf p,.wf h3,.wf ul{margin:0}
.wf .drawing{margin:0}
.wf .chip{border:0}
.wf .diagram.paused,.wf .diagram.paused *{animation-play-state:paused!important}.wf { --blue: #004187; --sky: #0098dc; --sky-tint: #e5f4fb; --navy-tint: #e7edf7; container-type: inline-size; min-width: 0; }
.wf .ic { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.wf .label { font: 500 10.5px/1.35 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.wf .drawing { border: 1px solid var(--rule); }
.wf .drawing > .hd { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; padding: 8px 12px; border-bottom: 1px solid var(--rule); }
.wf .drawing { gap: 0; }
.wf .board { padding: 10px 12px; background-image: radial-gradient(circle, #dde4ef 1px, transparent 1.2px); background-size: 16px 16px; }
@container (min-width: 1000px) {
  .wf .board { padding: 12px 16px; }
  
}
.wf .diagram { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); }
@container (min-width: 1000px) {
  .wf .diagram { grid-template-columns: minmax(0, 1.45fr) 52px minmax(0, 1fr) 52px minmax(0, .9fr) 52px minmax(0, 1.15fr); grid-template-rows: auto auto; grid-template-areas: "rules . team . trader . right" "ctx . team . trader . right"; row-gap: 14px; }
  .wf .a-rules { grid-area: rules; }
  .wf .a-ctx { grid-area: ctx; }
  .wf .a-team { grid-area: team; }
  .wf .a-trader { grid-area: trader; align-self: center; }
  .wf .a-right { grid-area: right; }
  .wf .vconn { display: none !important; }
  
}
.wf .wires { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; z-index: 2; display: none; }
@container (min-width: 1000px) {
  .wf .wires { display: block; }
  
}
.wf .wires path { fill: none; stroke: var(--rule); stroke-width: 1.5; transition: stroke .3s var(--ease), stroke-width .3s var(--ease); }
.wf .wires path.hot { stroke: var(--sky); stroke-width: 2.25; }
.wf .wires text { font: 500 11.5px var(--mono); fill: var(--ink); letter-spacing: .02em; }
.wf .wires .dot { fill: var(--sky); stroke: #fff; stroke-width: 1.5; }
.wf .vconn { height: 26px; position: relative; display: grid; place-items: center; }
.wf .vconn::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 4px; width: 1.5px; margin-left: -.75px; background: var(--rule); }
.wf .vconn::after { content: ""; position: absolute; left: 50%; bottom: 0; margin-left: -4px; border: 4px solid transparent; border-top: 6px solid var(--rule); border-bottom: 0; }
.wf .vconn span { position: relative; z-index: 1; background: var(--sheet); padding: 0 6px; font: 500 10.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink); margin-left: 120px; }
.wf .vconn.on::before { background: var(--sky); }
.wf .panel { position: relative; z-index: 1; border: 1px solid var(--rule); background: var(--sheet); min-width: 0; transition: box-shadow .35s var(--ease), opacity .4s var(--ease); }
.wf .panel > .ph { display: flex; justify-content: space-between; gap: 8px; align-items: center; padding: 7px 10px; border-bottom: 1px solid var(--rule); background: var(--tint); }
.wf .panel > .ph .step { font: 500 10.5px var(--mono); color: #fff; background: var(--rule); padding: 3px 6px; border-radius: 3px; }
.wf .panel.on { box-shadow: 0 0 0 3px rgba(0, 152, 220, .28); }
.wf .diagram.playing .panel.wf-next { opacity: .55; }
.wf .a-rules .ph { background: var(--sky-tint); }
.wf .rulesflow { display: grid; grid-template-columns: minmax(0, 1fr) 14px minmax(0, .8fr) 14px minmax(0, 1fr); align-items: stretch; padding: 10px; }
.wf .mini { border: 1px solid var(--hair); padding: 7px; display: grid; gap: 5px; align-content: start; background: #fff; }
.wf .mini h3 { font: 500 13px/1.2 var(--sans); color: var(--ink); display: flex; gap: 6px; align-items: center; }
.wf .mini h3 .ic { width: 18px; height: 18px; color: var(--sky); }
.wf .arr { display: grid; place-items: center; color: var(--rule); font: 500 13px var(--mono); }
.wf .vchips { display: grid; gap: 3px; }
.wf .vchip { font: 500 10.5px/1.25 var(--mono); color: var(--ink); background: var(--tint); padding: 3px 5px; }
.wf .a-rules.on .vchip { animation: lit 1s var(--ease) both; animation-delay: calc(var(--i) * 140ms); }
.wf .dvi { display: flex; align-items: center; justify-content: center; gap: 4px; }
.wf .dvi b { font: 500 32px/1 var(--mono); color: var(--ink); font-variant-numeric: tabular-nums; }
.wf .mini:has(.dvi) { grid-template-rows: auto 1fr; }   /* the reading sits centred in the card's free space */
.wf .wf-scale { position: relative; margin: 0 10px 10px; border: 1px solid var(--rule); background: #fff; }
.wf .wf-scale .bar { display: grid; grid-template-columns: 1fr 1fr 1fr; height: 30px; background: linear-gradient(90deg, var(--calm), var(--unsettled) 50%, #f9e0dc); }
.wf .wf-scale .bar div { display: grid; place-items: center; font: 600 11px var(--mono); letter-spacing: .08em; color: var(--calm-ink); }
.wf .wf-scale .bar div:nth-child(2) { color: var(--unsettled-ink); }
.wf .wf-scale .bar div:last-child { color: #a11409; }
.wf .wf-scale .axis { display: flex; align-items: center; gap: 12px; padding: 6px 8px; border-top: 1px solid var(--rule); font: 500 11px var(--mono); color: var(--ink-body); }
.wf .wf-scale .arrow { flex: 1; height: 0; border-top: 1.5px solid var(--ink-body); position: relative; }
.wf .wf-scale .arrow::after { content: ""; position: absolute; right: -1px; top: -5px; border-style: solid; border-width: 4.5px 0 4.5px 8px; border-color: transparent transparent transparent var(--ink-body); }
.wf .wf-scale .needle { position: absolute; left: 65%; top: -7px; height: 14px; width: 3px; margin-left: -1.5px; background: var(--rule); }
.wf .wf-scale .needle b { position: absolute; top: 1px; left: 6px; font: 600 11px/1 var(--mono); color: var(--rule); background: #fff; padding: 0 3px; }
.wf .sig { display: flex; justify-content: space-between; gap: 4px; align-items: center; font: 500 11px var(--mono); color: var(--ink); }
.wf .chip { display: inline-block; font: 500 9.5px/1 var(--mono); padding: 3px 4px; border-radius: 3px; letter-spacing: .03em; color: var(--unsettled-ink); background: var(--unsettled); }
.wf .a-rules.on .sig { animation: rise .5s var(--ease) both; animation-delay: calc(700ms + var(--i) * 140ms); }
.wf .rows { display: grid; }
.wf .crow { display: grid; grid-template-columns: 96px minmax(0, 1fr); border-top: 1px solid var(--hair); }
.wf .crow:first-child { border-top: 0; }
.wf .crow .k { display: grid; justify-items: start; gap: 2px; padding: 8px 10px; background: var(--navy-tint); color: var(--blue); font: 500 13px/1.15 var(--sans); transition: background .3s var(--ease), color .3s var(--ease); }
.wf .crow .k .ic { color: var(--blue); }
.wf .crow .v { display: flex; flex-wrap: wrap; gap: 4px; align-content: center; padding: 8px 10px; }
.wf .src { font: 500 11px/1.2 var(--mono); color: var(--ink-body); border: 1px solid var(--hair); padding: 3px 6px; border-radius: 3px; background: #fff; }
.wf .a-ctx.on .crow .k { animation: litk 1.1s var(--ease) both; animation-delay: calc(var(--i) * 170ms); }
.wf .a-team { display: grid; grid-template-rows: auto 1fr auto; background: var(--navy-tint); }
.wf .a-team > .ph { background: var(--rule); }
.wf .a-team > .ph .label { color: #fff; }
.wf .a-team > .ph .step { background: #fff; color: var(--rule); }
.wf .teambody { display: grid; grid-template-rows: auto 1fr auto; gap: 8px; padding: 10px; }
.wf .agent { border: 1px solid var(--rule); background: #fff; padding: 10px; display: grid; gap: 6px; justify-items: center; text-align: center; transition: box-shadow .3s var(--ease); }
.wf .agent .ic { width: 34px; height: 34px; stroke-width: 1.5; }
.wf .agent b { font: 400 22px/1.1 var(--head); color: var(--ink); }
.wf .agent span { font-size: 12.5px; line-height: 1.35; color: var(--ink-body); }
.wf .agent.bull .ic { color: var(--sky); }
.wf .agent.bear .ic { color: var(--rule); }
.wf .agent.hot { box-shadow: 0 0 0 3px rgba(0, 152, 220, .28); }
.wf .disc { position: relative; display: grid; place-items: center; min-height: 64px; }
.wf .disc .lane { position: absolute; top: 4px; bottom: 4px; width: 1.5px; background: var(--rule); }
.wf .disc .lane.up { left: calc(50% - 26px); }
.wf .disc .lane.dn { left: calc(50% + 26px); }
.wf .disc .lane::after { content: ""; position: absolute; left: -3.25px; width: 7px; height: 5px; background: var(--rule); }
.wf .disc .lane.up::after { top: -2px; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.wf .disc .lane.dn::after { bottom: -2px; clip-path: polygon(0 0, 100% 0, 50% 100%); }
.wf .disc .lane i { position: absolute; left: -3.25px; width: 8px; height: 8px; border-radius: 50%; background: var(--sky); opacity: 0; }
.wf .a-team.debating .lane.up i { animation: goUp 1s var(--ease) 2 both; }
.wf .a-team.debating .lane.dn i { animation: goDn 1s var(--ease) 2 both; animation-delay: .5s; }
.wf .disc em { position: relative; z-index: 1; font: 500 12px var(--mono); font-style: normal; letter-spacing: .04em; color: var(--ink); background: #fff; border: 1px solid var(--rule); border-radius: 3px; padding: 5px 10px; }
.wf .a-trader .tbody { display: grid; gap: 8px; justify-items: center; text-align: center; padding: 14px 10px; }
.wf .avatar { width: 64px; height: 64px; border: 1.5px solid var(--rule); border-radius: 3px; display: grid; place-items: center; color: var(--blue); background: var(--sky-tint); }
.wf .avatar .ic { width: 38px; height: 38px; stroke-width: 1.4; }
.wf .a-trader b { font: 400 24px/1.1 var(--head); color: var(--ink); }
.wf .a-trader p { font-size: 13px; line-height: 1.4; }
.wf .proposal { display: grid; gap: 4px; width: 100%; border: 1px dashed var(--ink-2); padding: 6px; font: 500 11px/1.3 var(--mono); color: var(--ink); text-align: left; }
.wf .verdict { display: inline-flex; gap: 4px; align-items: center; width: fit-content; font: 500 10px/1 var(--mono); color: var(--calm-ink); background: var(--calm); border: 1px solid var(--calm-ink); padding: 3px 5px; border-radius: 3px; }
.wf .verdict svg { width: 10px; height: 10px; }
.wf .a-trader.on .proposal { animation: rise .5s var(--ease) both; animation-delay: .4s; }
.wf .a-right { display: grid; gap: 0; align-content: start; min-width: 0; }
@container (min-width: 1000px) {
  .wf .a-right { gap: 44px; align-content: space-between; }
  
}
.wf .a-risk > .ph { background: var(--rule); }
.wf .a-risk > .ph .label { color: #fff; }
.wf .a-risk > .ph .step { background: #fff; color: var(--rule); }
.wf .risk-who { display: flex; gap: 10px; align-items: center; padding: 10px 10px 4px; }
.wf .risk-who .avatar { width: 44px; height: 44px; }
.wf .risk-who .avatar .ic { width: 26px; height: 26px; }
.wf .risk-who b { font: 400 21px/1.1 var(--head); color: var(--ink); }
.wf .checks { list-style: none; margin: 0; padding: 4px 10px 10px; display: grid; gap: 4px; }
.wf .checks li { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; color: var(--ink-body); border-top: 1px solid var(--hair); padding-top: 4px; }
.wf .checks li:first-child { border-top: 0; }
.wf .checks .ok { font: 500 10.5px var(--mono); color: var(--calm-ink); }
.wf .a-risk.on .checks .ok { animation: rise .45s var(--ease) both; animation-delay: calc(var(--i) * 260ms); }
.wf .a-exec { background: var(--rule); color: #fff; border-color: var(--rule); }
.wf .a-exec .xb { display: flex; gap: 12px; align-items: center; padding: 14px 36px 14px 12px; }
.wf .a-exec > .step { position: absolute; top: 7px; right: 10px; font: 500 10.5px var(--mono); color: var(--rule); background: #fff; padding: 3px 6px; border-radius: 3px; }
.wf .a-exec .ic { width: 34px; height: 34px; color: #fff; stroke-width: 1.5; }
.wf .a-exec.on .ic { animation: spin 1.2s var(--ease) both; }
.wf .a-exec b { display: block; font: 400 24px/1.05 var(--head); color: #fff; }
.wf .a-exec span { display: block; margin-top: 3px; font: 500 10.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: #cfe3f5; }
.wf .outs { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
@container (min-width: 560px) {
  .wf .outs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  
}
.wf .out { position: relative; z-index: 1; border: 1px solid var(--rule); background: #fff; padding: 8px; display: grid; gap: 3px; min-width: 0; transition: box-shadow .35s var(--ease), opacity .4s var(--ease); }
.wf .out .ic { color: var(--sky); width: 20px; height: 20px; }
.wf .out { grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 6px; }
.wf .out span { grid-column: 1 / -1; }
.wf .out b { font: 500 13.5px/1.2 var(--sans); color: var(--ink); }
.wf .out span { font: 500 10px/1.3 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--ink-2); }
.wf .out.on { box-shadow: 0 0 0 3px rgba(0, 152, 220, .28); }
.wf .diagram.playing .out.wf-next { opacity: .55; }
.wf .now { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; padding: 10px 12px; border-top: 1px solid var(--rule); }
.wf .now .txt { flex: 1 1 280px; min-width: 0; font-size: 14.5px; color: var(--ink); min-height: 2.9em; display: flex; align-items: center; }
.wf .ticks { display: flex; gap: 4px; }
.wf .ticks span { width: 18px; height: 4px; background: var(--hair); transition: background .3s var(--ease); }
.wf .ticks span.on { background: var(--rule); }
.wf .ctl { display: inline-flex; gap: 6px; align-items: center; font: 500 12px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink); background: #fff; border: 1px solid var(--rule); border-radius: 3px; padding: 7px 10px; cursor: pointer; transition: background .25s var(--ease), transform .25s var(--ease); }
.wf .ctl:hover { background: var(--tint); }
.wf .ctl:active { transform: translateY(1px); }
.wf .ctl svg { width: 12px; height: 12px; }
.wf .sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@media (prefers-reduced-motion: reduce) {
  .wf *, .wf *::before, .wf *::after { animation: none !important; transition: none !important; }
  
}
@keyframes litk { 0% { background: var(--navy-tint); color: var(--blue); } 35% { background: var(--sky); color: #fff; } 100% { background: var(--navy-tint); color: var(--blue); } }
@keyframes lit { 0% { background: var(--tint); } 40% { background: #cfeaf8; } 100% { background: var(--tint); } }
@keyframes rise { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
@keyframes goUp { 0% { bottom: 0; opacity: 0; } 15%, 85% { opacity: 1; } 100% { bottom: calc(100% - 8px); opacity: 0; } }
@keyframes goDn { 0% { top: 0; opacity: 0; } 15%, 85% { opacity: 1; } 100% { top: calc(100% - 8px); opacity: 0; } }
@keyframes spin { from { transform: rotate(-180deg); } to { transform: none; } }

/* phones (#152): the three rules cards stack. Side by side they are 80 to 100 px wide, and larger text
   (the phone's text-size setting) overflowed them. The arrows point down between the cards. */
@container (max-width:559px){
  .wf .rulesflow{grid-template-columns:minmax(0,1fr)}
  .wf .arr{transform:rotate(90deg);height:18px}
  .wf .vchips{display:flex;flex-wrap:wrap}
  .wf .mini h3,.wf .dvi{flex-wrap:wrap}
  .wf .dvi b{font-size:44px}
}

/* Issue #164: /contact/, on the /login/ layout. Fluent Forms draws the form; its default look is off (dts.php). */
.ct .li-help ul{margin:var(--s2) 0 0;padding-inline-start:1.1em;font-size:15px;line-height:1.45}
.ct .li-help li + li{margin-block-start:var(--s2)}
.ct-under p{margin:0;font-size:15px;color:var(--ink-2)}
.ct-under p + p{margin-block-start:var(--s1)}
.ct-under a{overflow-wrap:anywhere}
.ct .frm-fluent-form{margin:0;padding:var(--s3);border:1.5px solid var(--rule);background:var(--sheet)}
.ct .ff-el-group{margin:0 0 var(--s3)}
.ct .ff-el-input--label{margin:0 0 var(--s1)}
.ct .ff-el-input--label label{margin:0;font:600 15px/1.3 var(--sans);color:var(--ink)}
.ct .ff-el-is-required.asterisk-right label::after{color:var(--ink-2)}
.ct .ff-el-form-control{display:block;width:100%;min-height:48px;padding:12px;font:400 17px/1.3 var(--sans);color:var(--ink);background:var(--sheet);border:1.5px solid var(--ink-2);border-radius:var(--r-sm);box-shadow:none}
.ct textarea.ff-el-form-control{min-height:168px;resize:vertical}
.ct .ff-el-form-control:focus{outline:3px solid var(--link);outline-offset:1px;border-color:var(--ink)}
.ct .ff-el-is-error .ff-el-form-control{border-color:var(--stressed-ink)}
.ct .ff-el-is-error .error,.ct .text-danger{display:block;margin-block-start:var(--s1);font:500 14px/1.4 var(--sans);color:var(--stressed-ink)}
.ct .ff_submit_btn_wrapper,.ct .ff-el-group.ff-text-left{margin:0}
.ct .ff-btn-submit{width:100%;min-height:52px;padding:var(--s4) var(--s6);background:var(--ink);color:var(--sheet);border:0;border-radius:var(--r-sm);font:600 18px/1 var(--sans);cursor:pointer;transition:background .15s}
.ct .ff-btn-submit:hover{background:var(--hover)}
.ct .ff-btn-submit:focus-visible{outline:3px solid var(--link);outline-offset:2px}
.ct .ff-message-success{margin:0;padding:var(--s3);border:1.5px solid var(--ink);background:var(--tint);color:var(--ink);font:600 18px/1.4 var(--sans);box-shadow:none;overflow-wrap:anywhere}
.ct .ff-errors-in-stack{margin:0 0 var(--s3);padding:var(--s3);border:1.5px solid var(--stressed-ink);background:var(--stressed);color:var(--stressed-ink)}