/*
	PTI site refresh (docs/mockup/). Started from docs/mockup/pti.css: the tokens, then the mockup's
	components, then the site's layout, header, footer and phone rules, which the mockup drew with
	inline styles. Loaded after Bootstrap 3.3.6 and css/tonys.css, so it overrides them; where a
	mockup class shares a name with a Bootstrap 3 class (.btn, .badge, .alert, .label), the Bootstrap
	properties it does not set are reset here. The mockup's list row (.row) is .pti-row here, because
	Bootstrap's .row is its grid row.

	Brand: navy for primary buttons, links, the selected ring, progress bars and the active nav item;
	gold only behind dark text (badges) or as a rule; green and red only for correct and incorrect,
	always with a word or an icon.
*/

/* ------------------------------------------------------------------ tokens */
:root{--accent:#003366;--accent-strong:#00224A;--accent-soft:#E8EEF5;--gold:#E89E1B;--gold-soft:#FBEFD9;--bg:#F6F7F9;--surface:#FFFFFF;--border:#DDE2E8;--border-strong:#C9D1DA;--text:#1A202C;--muted:#5A6675;--ok:#1E7B34;--ok-soft:#E8F5EA;--bad:#B3261E;--bad-soft:#FBECEA;--radius:8px;--radius-card:10px;--shadow:0 1px 2px rgba(16,24,40,.04);--heading:"Jost","Source Sans 3",system-ui,-apple-system,"Segoe UI",sans-serif;--text-font:"Source Sans 3",system-ui,-apple-system,"Segoe UI",sans-serif}

/* ------------------------------------------------------------------ base */
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--text-font);font-size:17px;line-height:1.5;-webkit-font-smoothing:antialiased}
*{box-sizing:border-box}
a,a:link,a:visited{color:var(--accent)}a:hover,a:focus,a:active{color:var(--accent-strong)}
p a:not(.btn),li a:not(.btn){text-decoration:underline;text-underline-offset:2px}/* a link inside running text is marked by more than its colour */
h1,h2,h3{margin:0;line-height:1.15;font-weight:700;font-family:var(--heading);color:inherit}
h1{font-size:40px}h2{font-size:28px}h3{font-size:20px;font-weight:600}
p{margin:0}
img{max-width:100%}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
a:focus-visible,.btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}/* the same specificity as Bootstrap's own focus rules, loaded later */
.pti-cta a:focus-visible,.pti-cta .btn:focus-visible,.pti-cta button:focus-visible{outline-color:#fff}
a:focus:not(:focus-visible),.btn:focus:not(:focus-visible){outline:0}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}

/* ------------------------------------------------------------------ components (docs/mockup/pti.css) */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 20px;border-radius:var(--radius);font-family:inherit;font-weight:600;font-size:16px;line-height:1.2;cursor:pointer;text-decoration:none;border:1px solid transparent;white-space:nowrap;margin:0;vertical-align:middle;background-image:none;box-shadow:none;text-align:center}
.btn:hover,.btn:focus{text-decoration:none}
.btn-primary,.btn-primary:focus{background:var(--accent);color:#fff;border-color:var(--accent)}.btn-primary:hover,.btn-primary:active{background:var(--accent-strong);color:#fff;border-color:var(--accent-strong)}
.btn-primary:active:hover,.btn-primary:active:focus,.btn-primary.active:hover,.btn-primary.active:focus{background:var(--accent-strong);border-color:var(--accent-strong);color:#fff}.btn:active,.btn.active{box-shadow:none}
.btn-secondary{background:#fff;color:var(--text);border-color:var(--border-strong)}.btn-secondary:hover,.btn-secondary:focus{background:#F0F3F6;color:var(--text)}
.btn-disabled,.btn[disabled]{background:#EEF1F4;color:#8A97A6;cursor:default;border-color:#EEF1F4}
.btn-lg{min-height:48px;padding:0 24px;font-size:17px}
.btn-sm{min-height:40px;padding:0 16px;font-size:15px}
.btn-light{background:#fff;color:var(--accent);border-color:#fff}.btn-light:hover,.btn-light:focus{background:#F0F3F6;color:var(--accent)}
.btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}.btn-ghost:hover,.btn-ghost:focus{background:rgba(255,255,255,.1);color:#fff}
/* tonys.css colours a:link and a:visited, which outrank one class, so links styled as buttons or nav items say their colour again */
a.btn-primary:link,a.btn-primary:visited,a.btn-primary:hover,a.btn-primary:focus,a.btn-primary:active{color:#fff}
a.btn-secondary:link,a.btn-secondary:visited,a.btn-secondary:hover,a.btn-secondary:focus{color:var(--text)}
a.btn-light:link,a.btn-light:visited,a.btn-light:hover,a.btn-light:focus{color:var(--accent)}
a.btn-ghost:link,a.btn-ghost:visited,a.btn-ghost:hover,a.btn-ghost:focus{color:#fff}
a.navlink:link,a.navlink:visited{color:#3F4A57}a.navlink:hover,a.navlink:focus{color:var(--text)}
a.navlink-on:link,a.navlink-on:visited,a.navlink-on:hover{color:var(--accent)}
a.pti-brand:link,a.pti-brand:visited,a.pti-brand:hover{color:var(--text)}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-card);box-shadow:var(--shadow)}
.muted{color:var(--muted)}
.navlink{color:#3F4A57;text-decoration:none;font-weight:600;font-size:15px;padding:6px 0;border-bottom:2px solid transparent;white-space:nowrap}.navlink:hover,.navlink:focus{color:var(--text);text-decoration:none}
.navlink-on,.navlink-on:hover{color:var(--accent);border-bottom-color:var(--accent)}
.label{display:block;font-weight:600;font-size:15px;margin-bottom:6px;color:inherit;padding:0;background:none;border-radius:0;text-align:left;white-space:normal;vertical-align:baseline;line-height:1.4}
.req{color:var(--bad);margin-left:2px}
.input{width:100%;min-height:44px;padding:0 12px;border:1px solid var(--border-strong);border-radius:var(--radius);font-family:inherit;font-size:16px;background:#fff;color:var(--text)}
.input:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
.input-error{border-color:var(--bad);box-shadow:0 0 0 1px var(--bad)}
.help{font-size:14px;color:var(--muted);margin-top:6px}
.error{display:flex;gap:6px;align-items:center;font-size:14px;color:var(--bad);margin-top:6px;font-weight:600}
.alert{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:var(--radius);background:var(--bad-soft);border:1px solid #F1C5C1;color:#8F1E18;font-size:15px;margin:0}
.option{display:flex;align-items:flex-start;gap:12px;padding:14px 16px;border:1px solid var(--border-strong);border-radius:var(--radius-card);background:#fff;font-size:17px;line-height:1.4;position:relative;cursor:pointer}
.option input{position:absolute;opacity:0;width:1px;height:1px}
.option-dim{color:var(--muted)}
.option-correct{border-color:var(--ok);background:var(--ok-soft);box-shadow:0 0 0 1px var(--ok)}
.option-incorrect{border-color:var(--bad);background:var(--bad-soft);box-shadow:0 0 0 1px var(--bad)}
.key{width:24px;height:24px;border-radius:6px;background:#EEF1F4;color:#3F4A57;font-weight:700;font-size:13px;display:inline-flex;align-items:center;justify-content:center;flex:none;margin-top:1px}
.badge{display:inline-flex;align-items:center;gap:6px;height:26px;min-width:0;padding:0 10px;border-radius:999px;font-size:13px;font-weight:600;line-height:1;white-space:nowrap;vertical-align:baseline;text-align:left}
.badge-gold{background:var(--gold-soft);color:#7A4E00}
.badge-navy{background:var(--accent-soft);color:var(--accent)}
.badge-green{background:var(--ok-soft);color:#155C27}
.badge-red{background:var(--bad-soft);color:#8F1E18}
.badge-gray{background:#EEF1F4;color:#3F4A57}
.check{display:flex;gap:10px;align-items:flex-start}
.check svg{flex:none;margin-top:3px;color:var(--accent)}/* navy, not the mockup's green: green and red mean right and wrong only */
.why{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border-radius:var(--radius);background:var(--bg);font-size:15px;line-height:1.45}
.pti-row{display:flex;align-items:center;gap:14px;padding:14px 0;border-top:1px solid #EEF1F4;font-size:16px}
.mark{width:28px;height:28px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;flex:none}
.eyebrow{font-weight:700;font-size:14px;color:#7A4E00;letter-spacing:.01em}
.quote{font-size:17px;line-height:1.5}
.num{width:36px;height:36px;border-radius:var(--radius);background:var(--accent-soft);color:var(--accent);display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-family:var(--heading);flex:none}
.avatar{width:72px;height:72px;border-radius:50%;background:var(--accent-soft);display:inline-flex;align-items:center;justify-content:center;flex:none}
.iconbtn{width:44px;height:44px;border-radius:var(--radius);border:none;background:transparent;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}

/* ------------------------------------------------------------------ layout */
.pti-page{min-height:100vh;display:flex;flex-direction:column}
.pti-main{flex-grow:1}
.pti-wrap{max-width:1180px;margin:0 auto;padding:0 24px}
.pti-section .pti-wrap{padding:0}
.pti-section{padding:64px 24px}
.pti-section-white{background:#fff}
.pti-section-band{background:#fff;border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding-top:48px;padding-bottom:48px}
.pti-section-end{padding-top:0}
.pti-hero{padding-top:72px;padding-bottom:72px}
.pti-stack{display:flex;flex-direction:column}
.pti-inline{display:flex;align-items:center}
.pti-grid{display:grid;gap:20px}
.pti-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.pti-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.pti-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.pti-cols-7-5{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.pti-cols-5-7{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.pti-cols-2-1{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}
.pti-align-center{align-items:center}
.pti-align-start{align-items:start}
.pti-masonry{columns:3;column-gap:20px}
.pti-masonry > *{break-inside:avoid;margin-bottom:20px}
.gap-4{gap:4px}.gap-6{gap:6px}.gap-8{gap:8px}.gap-10{gap:10px}.gap-12{gap:12px}.gap-14{gap:14px}.gap-16{gap:16px}.gap-20{gap:20px}.gap-24{gap:24px}.gap-28{gap:28px}.gap-32{gap:32px}.gap-40{gap:40px}.gap-56{gap:56px}
.mt-8{margin-top:8px}.mt-16{margin-top:16px}.mt-20{margin-top:20px}.mt-28{margin-top:28px}.mb-28{margin-bottom:28px}
.pti-measure{max-width:40em}
.pti-prose{max-width:70ch}
.pti-prose p + p,.pti-prose p + ul,.pti-prose ul + p{margin-top:12px}
.pti-lead{font-size:19px;color:var(--muted)}
.pti-small{font-size:14px}
.pti-actions{display:flex;flex-wrap:wrap;gap:12px}
.pti-actions form{margin:0;display:inline-flex}
.pti-cta{padding:40px;display:flex;align-items:center;justify-content:space-between;gap:32px;background:var(--accent);border-color:var(--accent);color:#fff}
.pti-cta h2{color:#fff}
.pti-cta p{color:#D6E0EC;max-width:36em}
.pti-cta .pti-actions{flex:none}
.pti-stat{font-family:var(--heading);font-size:44px;font-weight:700;line-height:1;color:var(--accent)}
.pti-headshot{width:88px;height:88px;border-radius:50%;object-fit:cover;object-position:50% 20%;flex:none;background:var(--accent-soft)}
.pti-portrait{width:100%;aspect-ratio:4 / 5;border-radius:var(--radius);object-fit:cover;object-position:50% 20%;display:block;background:var(--accent-soft)}
.pti-cover{width:100%;height:auto;border-radius:var(--radius);display:block}
.pti-person{padding:24px;display:flex;gap:20px;align-items:flex-start}
.pti-link-strong{font-weight:600;text-decoration:none}

/* The "Try the free sample" buttons are small POST forms (ptiSampleButton() in modules/header.php) */
.pti-sample-form{display:inline-flex;margin:0}
.pti-textlink{background:none;border:0;padding:0;font:inherit;color:var(--accent);text-decoration:underline;cursor:pointer}.pti-textlink:hover,.pti-textlink:focus{color:var(--accent-strong)}
.pti-hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}

/* ------------------------------------------------------------------ header */
.pti-header{background:#fff;border-bottom:1px solid var(--border);position:relative;z-index:10}
.pti-header-bar{height:80px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.pti-brand{display:inline-flex;align-items:center;gap:12px;text-decoration:none;color:var(--text);flex:none}
.pti-brand:hover,.pti-brand:focus{text-decoration:none;color:var(--text)}
.pti-brand img{height:56px;width:auto;display:block}
.pti-wordmark{display:flex;flex-direction:column;line-height:1.1;font-family:var(--heading)}
.pti-wordmark-1{font-weight:700;font-size:17px;color:var(--accent)}
.pti-wordmark-2{font-weight:500;font-size:13px;color:var(--muted)}
.pti-nav{display:flex;align-items:center;gap:22px}
.pti-header-actions{display:flex;align-items:center;gap:18px;flex:none}
.pti-menu-btn{display:none;align-items:center;gap:8px;min-height:44px;padding:0 12px;border:1px solid var(--border-strong);border-radius:var(--radius);background:#fff;color:var(--text);font:600 15px/1 var(--text-font);cursor:pointer}
.pti-menu-btn svg{flex:none}

/* ------------------------------------------------------------------ footer */
.pti-footer{background:#fff;border-top:1px solid var(--border);padding:40px 24px 28px}
.pti-footer .pti-wrap{padding:0}
.pti-footer-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;align-items:start}
.pti-footer-col{display:flex;flex-direction:column;gap:8px;font-size:15px}
.pti-footer-col a{text-decoration:none}
.pti-footer-title{font-weight:700;font-family:var(--heading)}
.pti-footer .pti-brand img{height:40px}
.pti-copyright{margin-top:24px;padding-top:16px;border-top:1px solid #EEF1F4;font-size:14px;color:var(--muted)}

/* Headings the pages size up on a laptop; the phone block below brings them down */
.pti-hero h1{font-size:42px}.pti-h2-lg{font-size:32px}

/* The pages not yet re-templated keep their Bootstrap .container markup: give it back some spacing */
.pti-main > .container{padding-top:24px;padding-bottom:40px}
.pti-main > .container h1,.pti-main > .container h2,.pti-main > .container h3{margin:20px 0 10px}
.pti-main > .container p{margin:0 0 10px}

@media (max-width:1240px){.pti-nav{gap:16px}.pti-header-actions{gap:14px}.pti-header-bar{gap:16px}}

/* ------------------------------------------------------------------ narrower screens: the nav folds into a menu
   (only with JavaScript, which modules/header.php marks with .pti-js; without it the nav stays open) */
@media (max-width:1180px){
	.pti-header-bar{height:auto;min-height:72px;flex-wrap:wrap;padding-top:8px;padding-bottom:8px;gap:12px}
	.pti-nav{flex-wrap:wrap;gap:12px 18px}
	.pti-js .pti-menu-btn{display:inline-flex;margin-left:auto}
	.pti-js .pti-nav,.pti-js .pti-header-actions{display:none;width:100%}
	.pti-js.pti-nav-open .pti-nav{display:flex;flex-direction:column;align-items:stretch;gap:0;padding:8px 0}
	.pti-js.pti-nav-open .pti-nav .navlink{padding:12px 0;border-bottom:1px solid #EEF1F4;font-size:17px}
	.pti-js.pti-nav-open .pti-nav .navlink-on{border-bottom-color:var(--accent)}
	.pti-js.pti-nav-open .pti-header-actions{display:flex;flex-direction:column;align-items:stretch;gap:12px;padding:8px 0 16px}
	.pti-js.pti-nav-open .pti-header-actions .navlink{padding:12px 0;font-size:17px}
	.pti-js.pti-nav-open .pti-header-actions .pti-sample-form,.pti-js.pti-nav-open .pti-header-actions .btn{width:100%}
}

/* ------------------------------------------------------------------ phones: one column, full-width buttons */
@media (max-width:760px){
	body{font-size:17px}
	h1{font-size:32px}
	.pti-hero h1{font-size:32px}
	h2{font-size:24px}
	.pti-section{padding:40px 20px}
	.pti-hero{padding-top:40px;padding-bottom:40px}
	.pti-section-end{padding-top:0}
	.pti-wrap{padding:0 20px}
	.pti-cols-2,.pti-cols-3,.pti-cols-4,.pti-cols-7-5,.pti-cols-5-7,.pti-cols-2-1{grid-template-columns:minmax(0,1fr)}
	.gap-40,.gap-56{gap:28px}
	.pti-masonry{columns:1}
	.pti-actions{flex-direction:column;align-items:stretch}
	.pti-actions .btn,.pti-actions form,.pti-actions .pti-sample-form{width:100%}
	.pti-actions form .btn{width:100%}
	.btn{white-space:normal}
	.pti-cta{flex-direction:column;align-items:stretch;padding:28px 20px}
	.pti-stat{font-size:36px}
	.pti-person{flex-direction:column;gap:14px}
	.pti-cover{max-width:220px;margin:0 auto}
	.pti-footer{padding:32px 20px 24px}
	.pti-footer-grid{grid-template-columns:minmax(0,1fr);gap:24px}
	.pti-wordmark-1{font-size:16px}
	.pti-brand img{height:48px}
	.pti-h2-lg{font-size:24px}
}

/* the smallest phones: keep the Menu button on the header's row */
@media (max-width:359px){.pti-brand{gap:8px}.pti-brand img{height:40px}.pti-wordmark-1{font-size:15px}.pti-menu-btn{padding:0 10px}}

/* ================================================================== the ExamAce screens (examAcePTI_Test.php)
   body.pti-app is the member side of examAcePTI_Test.php; the admin screens keep their old page and never
   load this file. One block per screen. */

/* ------------------------------------------------------------------ app: shared */
/* The page: the old fixed-width box (css/tonys.css, and the inline stylesheet in examAcePTI_Test.php,
   which uses !important) becomes the site's 1180px column; the old logo block gives way to the header */
body.pti-app{background:var(--bg);color:var(--text);font-family:var(--text-font);font-size:17px;line-height:1.5}
body.pti-app #chooseTestBox{width:100% !important;max-width:1180px !important;margin:0 auto;padding:32px 24px 0;border:0;border-radius:0;text-align:left;overflow:visible;display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:12px 24px}
body.pti-app #testHeadLogo{display:none}
body.pti-app #testHeadTitle{order:1;flex:1 1 320px;width:auto;max-width:none;min-height:0;margin:0;padding:0;text-align:left;border:0}
body.pti-app .bigTestTitle{font-family:var(--heading);font-size:30px;font-weight:700;line-height:1.15;color:var(--text) !important;margin:0 0 6px}
body.pti-app .sessionTitle,body.pti-app .testTitle{color:var(--muted) !important;font-size:16px;font-weight:600;line-height:1.45}
/* css/tonys.css gives the title box fixed heights and centred text at several widths */
body.pti-app #testHeadTitle{height:auto;min-height:0}
body.pti-app .bigTestTitle{height:auto;padding:0;text-align:left}
body.pti-app .sessionTitle{height:auto;text-align:left}
body.pti-app .sessionTitle br,body.pti-app #testHeadTitle > br{display:none}
body.pti-app #logoOutButtonContainer{order:2;float:none;width:auto;height:auto}
body.pti-app #logoutForm{margin:0}
/* The content after the title box sits in the same column */
body.pti-app .pti-main > .container{max-width:1180px;margin:0 auto;padding:24px 24px 0}
body.pti-app .pti-main{padding-bottom:64px}
/* Old boxes become cards */
body.pti-app .borderedBox{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-card);box-shadow:var(--shadow);padding:24px}
body.pti-app .clearBoth{clear:both}
/* Old form fields and buttons take the site's look; the markup, names and ids stay as they are */
body.pti-app .pti-main input[type="text"],body.pti-app .pti-main input[type="password"],body.pti-app .pti-main input[type="email"],body.pti-app .pti-main input[type="tel"],body.pti-app .pti-main input[type="number"],body.pti-app .pti-main select,body.pti-app .pti-main textarea{min-height:44px;padding:8px 12px;border:1px solid var(--border-strong);border-radius:var(--radius);font-family:inherit;font-size:16px;line-height:1.4;background:#fff;color:var(--text);max-width:100%}
body.pti-app .pti-main textarea{min-height:96px}
body.pti-app .pti-main input[type="text"]:focus,body.pti-app .pti-main input[type="password"]:focus,body.pti-app .pti-main input[type="email"]:focus,body.pti-app .pti-main input[type="tel"]:focus,body.pti-app .pti-main input[type="number"]:focus,body.pti-app .pti-main select:focus,body.pti-app .pti-main textarea:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent);box-shadow:none}
body.pti-app .pti-main label{font-weight:600;font-size:15px;margin-bottom:6px}
body.pti-app .pti-main input[type="submit"],body.pti-app .simpleSubmitButton,body.pti-app .emphasizedSubmitButton1,body.pti-app .emphasizedSubmitButton2,body.pti-app .emphasizedSubmitButton3,body.pti-app .emphasizedSubmitButton4,body.pti-app .showInfoButton{display:inline-flex;align-items:center;justify-content:center;float:none;flex:none;min-height:44px;margin:0;padding:0 20px;border:1px solid var(--accent);border-radius:var(--radius);background:var(--accent);background-image:none;box-shadow:none;outline:0;color:#fff;font-family:inherit;font-size:16px;font-weight:600;line-height:1.2;text-align:center;text-decoration:none;white-space:normal;cursor:pointer}
body.pti-app .pti-main input[type="submit"]:hover,body.pti-app .pti-main input[type="submit"]:focus,body.pti-app .simpleSubmitButton:hover,body.pti-app .emphasizedSubmitButton1:hover,body.pti-app .emphasizedSubmitButton2:hover,body.pti-app .emphasizedSubmitButton3:hover,body.pti-app .emphasizedSubmitButton4:hover,body.pti-app .showInfoButton:hover{background:var(--accent-strong);border-color:var(--accent-strong);color:#fff;transform:none}
body.pti-app .showInfoButton2,body.pti-app .smallSubmitButton,body.pti-app .pti-main input[type="submit"].showInfoButton2,body.pti-app .pti-main input[type="submit"].smallSubmitButton{display:inline-flex;align-items:center;justify-content:center;float:none;flex:none;min-height:40px;margin:0;padding:0 16px;border:1px solid var(--border-strong);border-radius:var(--radius);background:#fff;box-shadow:none;outline:0;color:var(--text);font-family:inherit;font-size:15px;font-weight:600;line-height:1.2;text-align:center;cursor:pointer}
body.pti-app .showInfoButton2:hover,body.pti-app .smallSubmitButton:hover,body.pti-app .pti-main input[type="submit"].showInfoButton2:hover,body.pti-app .pti-main input[type="submit"].smallSubmitButton:hover{background:#F0F3F6;color:var(--text);border-color:var(--border-strong)}
body.pti-app .pti-main input[type="submit"]:focus-visible,body.pti-app .showInfoButton2:focus-visible,body.pti-app .smallSubmitButton:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* The old error notices stay red (red means wrong), always with their words */
body.pti-app .style1r,body.pti-app .textRedPlain{color:var(--bad)}
@media (max-width:760px){
	body.pti-app #chooseTestBox{padding:24px 20px 0}
	body.pti-app .bigTestTitle{font-size:24px}
	body.pti-app .pti-main > .container{padding:20px 20px 0}
	body.pti-app .pti-main input[type="submit"]{width:100%}
	body.pti-app #logoOutButtonContainer{order:0;margin-left:auto}
	body.pti-app .borderedBox{padding:20px}
}
/* end app: shared */


/* ------------------------------------------------------------------ app: log in and forgot password */
/* examAcePTI_Test.php section 'choose' (docs/mockup/Login.html and Forgot.html): the log-in card with the
   Forgot Password card under it, and the card for new members (Become a Member, the free sample) beside
   them; one column on phones. The log-in card's "Forgot your password?" link jumps to #ptiForgot. */
body.pti-app .ptiLoginGrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"login new" "forgot new";grid-template-rows:auto 1fr;gap:24px;align-items:start}
body.pti-app .ptiLoginMain{grid-area:login}
body.pti-app .ptiLoginNew{grid-area:new}
body.pti-app .ptiLoginForgot{grid-area:forgot}
body.pti-app .ptiLoginCard{display:flex;flex-direction:column;gap:20px;min-width:0;margin:0;padding:32px;text-align:left;scroll-margin-top:24px}
body.pti-app .ptiLoginCard:target{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
body.pti-app .ptiLoginCard h2{margin:0;font-size:24px;color:var(--text)}
body.pti-app .ptiLoginCard p{margin:0}/* not the spacing the shared rules give text in a .container */
body.pti-app .ptiLoginMain h2{font-size:28px}
body.pti-app .ptiLoginCard h2 + p{margin-top:-12px}
body.pti-app .ptiLoginCard form{display:flex;flex-direction:column;gap:20px;margin:0}
body.pti-app .ptiLoginCard .form-group{width:auto;margin:0;padding:0;font-size:inherit}
body.pti-app .ptiLoginCard label{display:block;color:var(--text);margin:0 0 6px}
body.pti-app .ptiLoginCard .form-control{display:block;width:100%;height:auto;margin:0}
body.pti-app .ptiLoginCard .help{margin-top:8px;font-size:15px}
body.pti-app .pti-main .ptiLoginCard input[type="submit"]{width:100%}
body.pti-app .pti-main .ptiLoginMain input[type="submit"]{min-height:48px;font-size:17px}
/* Become a Member leads in its card; the free sample and Send Me My Password are the secondary look */
body.pti-app .ptiLoginSample{display:flex;flex-direction:column;gap:12px;padding-top:20px;border-top:1px solid #EEF1F4}
body.pti-app .pti-main .ptiLoginSample input[type="submit"],body.pti-app .pti-main .ptiLoginForgot input[type="submit"]{border-color:var(--border-strong);background:#fff;color:var(--text);box-shadow:none}
body.pti-app .pti-main .ptiLoginSample input[type="submit"]:hover,body.pti-app .pti-main .ptiLoginSample input[type="submit"]:focus,body.pti-app .pti-main .ptiLoginForgot input[type="submit"]:hover,body.pti-app .pti-main .ptiLoginForgot input[type="submit"]:focus{border-color:var(--border-strong);background:#F0F3F6;color:var(--text)}
body.pti-app .ptiLoginPolicy{font-size:15px}
/* A wrong password (red, with its icon and words) in the log-in card; the Forgot Password answer above the cards */
body.pti-app .ptiLoginAlert{margin:0}
body.pti-app .ptiLoginAlert svg,body.pti-app .ptiLoginNotice svg{flex:none;margin-top:3px}
body.pti-app .ptiLoginNotice{margin:0 0 24px;border-color:#C9D6E4;background:var(--accent-soft);color:var(--text)}
/* The cookie notice (modules/cookie_jar.php) in the title box: a navy information line under the title */
body.pti-app #cookieWarning{order:3;flex:1 1 100%;max-width:none;margin:0;padding:12px 14px 12px 40px;border:1px solid #C9D6E4;border-radius:var(--radius);background:var(--accent-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23003366' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5M12 8h.01'/%3E%3C/svg%3E") no-repeat 14px 15px;color:var(--text);font-size:15px;font-weight:400;line-height:1.5;text-align:left}
body.pti-app #cookieWarning br + br{display:none}
@media (max-width:760px){
	body.pti-app .ptiLoginGrid{grid-template-columns:minmax(0,1fr);grid-template-areas:"login" "new" "forgot";grid-template-rows:none;gap:20px}
	body.pti-app .ptiLoginCard{padding:24px 20px}
	body.pti-app .ptiLoginCard h2,body.pti-app .ptiLoginMain h2{font-size:24px}
	body.pti-app .ptiLoginNotice{margin-bottom:20px}
}
/* end app: log in and forgot password */


/* ------------------------------------------------------------------ app: registration */
/* Registration and its thank-you page (members section, docs/mockup/Register.html). The welcome box
   (.pti-reg-intro) and the member form below it read as one card: the box is its top, the form its
   bottom. Labels sit above the boxes with the required mark after the words (the label's colon is a
   span, hidden here); help and messages sit under each box. The admin's copy of the form keeps the old
   page and never loads this file. The pairs (the names; state and ZIP; the emails; university and
   graduated; title and degree; the passwords) sit side by side where the browser has :has(), on
   screens wider than a phone; elsewhere every box is full width. Field order, names and ids are as they were. */
body.pti-app .pti-reg-intro,body.pti-app form[name="ptiMemberform"],body.pti-app .pti-reg-thanks{box-sizing:border-box;width:calc(100% - 48px);max-width:600px;margin-left:auto;margin-right:auto;background:var(--surface);border:1px solid var(--border);color:var(--text);font-family:var(--text-font);font-size:17px;line-height:1.5;text-align:left}
body.pti-app .pti-reg-intro{display:flex;flex-direction:column;gap:8px;margin-top:24px;margin-bottom:0;padding:36px 36px 0;border-bottom:0;border-radius:var(--radius-card) var(--radius-card) 0 0}
body.pti-app .pti-reg-intro h1,body.pti-app .pti-reg-thanks h1{margin:0 0 2px;font-family:var(--heading);font-size:30px;font-weight:700;line-height:1.15;color:var(--text)}
body.pti-app .pti-reg-intro p,body.pti-app .pti-reg-thanks p{margin:0}
body.pti-app .pti-reg-intro .muted{font-size:15px}
body.pti-app .pti-reg-intro .style1r{color:var(--bad)}
body.pti-app .pti-reg-intro + div[align="center"]{display:none}/* the two blank lines between the welcome and the form */
body.pti-app form[name="ptiMemberform"]{display:grid;grid-template-columns:minmax(0,1fr);gap:20px 16px;align-items:start;margin-top:0;margin-bottom:0;padding:24px 36px 36px;border-top:0;border-radius:0 0 var(--radius-card) var(--radius-card);box-shadow:var(--shadow)}
body.pti-app form[name="ptiMemberform"] > *{grid-column:1 / -1;min-width:0}
body.pti-app form[name="ptiMemberform"] > .form-group{width:auto;margin:0;padding:0;font-size:17px;line-height:1.5}
body.pti-app form[name="ptiMemberform"] .level-indicator{display:none}/* the label's words again, small, above the label */
body.pti-app form[name="ptiMemberform"] label{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 2px;margin:0 0 6px;font-family:inherit;font-size:15px;font-weight:600;line-height:1.4;color:var(--text)}
body.pti-app form[name="ptiMemberform"] label .style1r{order:1;color:var(--bad)}
body.pti-app form[name="ptiMemberform"] label .labelColon{display:none}
body.pti-app form[name="ptiMemberform"] .form-group input:not([type="radio"]):not([type="checkbox"]),body.pti-app form[name="ptiMemberform"] .form-group select{display:block;width:100%;max-width:100%;min-height:44px;margin:0}/* the text boxes and the list; a radio or checkbox keeps its own size */
body.pti-app form[name="ptiMemberform"] select{-webkit-appearance:none;appearance:none;padding-right:40px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%235A6675' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center}
body.pti-app form[name="ptiMemberform"] input[aria-invalid="true"],body.pti-app form[name="ptiMemberform"] select[aria-invalid="true"],body.pti-app form[name="ptiMemberform"] input[aria-invalid="true"]:focus,body.pti-app form[name="ptiMemberform"] select[aria-invalid="true"]:focus{border-color:var(--bad);box-shadow:0 0 0 1px var(--bad)}
/* A message about a box: red, with its words and the alert icon; it takes the place of the help */
body.pti-app form[name="ptiMemberform"] .fieldMessage{display:flex;gap:6px;align-items:flex-start;margin:6px 0 0;font-size:14px;font-weight:600;line-height:1.4;color:var(--bad)}
body.pti-app form[name="ptiMemberform"] .fieldMessage::before,body.pti-app form[name="ptiMemberform"] .formErrorSummary::before{content:"";flex:none;width:16px;height:16px;margin-top:1px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23B3261E' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 8v5M12 16h.01'/%3E%3C/svg%3E") no-repeat center / 16px 16px}
body.pti-app form[name="ptiMemberform"] .fieldNote{display:block;margin:6px 0 0;font-family:inherit;font-size:14px;font-weight:400;line-height:1.4;color:var(--muted)}
body.pti-app form[name="ptiMemberform"] .fieldMessage ~ .fieldNote{display:none}
/* "Nothing was saved": the alert at the top of the form */
body.pti-app form[name="ptiMemberform"] .formErrorSummary{display:flex;gap:10px;align-items:flex-start;margin:0;padding:12px 14px;border:1px solid #F1C5C1;border-radius:var(--radius);background:var(--bad-soft);color:#8F1E18;font-size:15px;font-weight:600;line-height:1.45}
body.pti-app form[name="ptiMemberform"] .formErrorSummary::before{margin-top:2px}
/* The one submit: full width, as the mockup's */
body.pti-app form[name="ptiMemberform"] > p{margin:4px 0 0;text-align:center}
body.pti-app form[name="ptiMemberform"] > p input[type="submit"]{width:100%;min-height:48px;padding:0 24px;font-size:17px}
/* The list of empty required boxes that adminPTI.php adds under the page repeats the alert and the
   messages above, after the button; the form says it all */
body.pti-app form[name="ptiMemberform"] ~ .errorTable{display:none}
/* Side by side on wider screens: three names, then pairs */
@media (min-width:761px){
	body.pti-app form[name="ptiMemberform"]{grid-template-columns:repeat(6,minmax(0,1fr))}
	body.pti-app form[name="ptiMemberform"] > .form-group:has(> #mpdbf01),body.pti-app form[name="ptiMemberform"] > .form-group:has(> #mpdbf02),body.pti-app form[name="ptiMemberform"] > .form-group:has(> #mpdbf03){grid-column:span 2}
	body.pti-app form[name="ptiMemberform"] > .form-group:has(> #mpdbf06),body.pti-app form[name="ptiMemberform"] > .form-group:has(> #mpdbf07),body.pti-app form[name="ptiMemberform"] > .form-group:has(> #mpdbf13),body.pti-app form[name="ptiMemberform"] > .form-group:has(> #mpdbf14),body.pti-app form[name="ptiMemberform"] > .form-group:has(> #mpdbf30),body.pti-app form[name="ptiMemberform"] > .form-group:has(> #mpdbf32),body.pti-app form[name="ptiMemberform"] > .form-group:has(> #mpdbf35),body.pti-app form[name="ptiMemberform"] > .form-group:has(> #mpdbf36),body.pti-app form[name="ptiMemberform"] > .form-group:has(> #mpdbf11),body.pti-app form[name="ptiMemberform"] > .form-group:has(> #mpdbf12){grid-column:span 3}
}
/* "May we contact you for a follow-up?": Yes or No (ptiMemberFollowUpHtml in ../includes/ptiMemberForm.php) */
body.pti-app form[name="ptiMemberform"] .ptiChoiceLabel{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 2px;margin:0 0 6px;font-size:15px;font-weight:600;line-height:1.4;color:var(--text)}
body.pti-app form[name="ptiMemberform"] .ptiChoiceLabel .style1r{order:1;color:var(--bad)}
body.pti-app form[name="ptiMemberform"] .ptiChoiceLabel .labelColon{display:none}
body.pti-app form[name="ptiMemberform"] .ptiChoiceSet{display:flex;flex-wrap:wrap;align-items:center;gap:8px 24px}/* one row: Yes, then No */
body.pti-app form[name="ptiMemberform"] label.ptiChoiceOption{display:inline-flex;align-items:center;gap:8px;margin:0;padding:0;font-size:16px;font-weight:400;line-height:1.4;color:var(--text);cursor:pointer}
body.pti-app form[name="ptiMemberform"] .ptiChoiceOption input[type="radio"]{margin:0;flex:none;accent-color:var(--accent);cursor:pointer}/* native size */
/* The thank-you page after registering: one card, the button full width */
body.pti-app .pti-reg-thanks{display:flex;flex-direction:column;gap:12px;margin-top:24px;margin-bottom:0;padding:36px;border-radius:var(--radius-card);box-shadow:var(--shadow)}
body.pti-app .pti-reg-thanks h1{font-size:26px;line-height:1.2}
body.pti-app .pti-reg-thanks h1 em{font-style:normal}
body.pti-app .pti-reg-thanks form{margin:12px 0 0}
body.pti-app .pti-reg-thanks .centeredBox{margin:0;text-align:left}
body.pti-app .pti-reg-thanks input[type="submit"].showInfoButton{width:100%;min-height:48px;padding:0 24px;font-size:17px}
@media (max-width:760px){
	body.pti-app .pti-reg-intro,body.pti-app form[name="ptiMemberform"],body.pti-app .pti-reg-thanks{width:calc(100% - 40px)}
	body.pti-app .pti-reg-intro{margin-top:20px;padding:24px 20px 0}
	body.pti-app form[name="ptiMemberform"]{padding:20px 20px 24px}
	body.pti-app .pti-reg-thanks{margin-top:20px;padding:24px 20px}
	body.pti-app .pti-reg-intro h1{font-size:26px}
	body.pti-app .pti-reg-thanks h1{font-size:22px}
}
/* end app: registration */


/* ------------------------------------------------------------------ app: member home */
/* The member home (choosetest in examAcePTI_Test.php) and a test's case list (findCases in
   modules/findTestSessionCaseQuestion.php), after docs/mockup/MemberHome.html: a grid of cards, each with a
   heading, a status badge, a line of text and the old form with its button. The forms, their fields and
   their button labels are as they were; the purchase form (PayPal) is styled from here only. */
body.pti-app .pti-home{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;max-width:1180px;margin:0 auto;padding:28px 24px 0;text-align:left}
body.pti-app #chooseCaseBox.pti-home{grid-template-columns:repeat(3,minmax(0,1fr));width:auto;max-width:1180px;margin:0 auto;padding:28px 24px 0;border:0;border-radius:0;clear:both;text-align:left}
body.pti-app .pti-home-intro{grid-column:1 / -1;display:flex;flex-direction:column;gap:6px}
body.pti-app .pti-home-eyebrow{color:var(--muted);font-weight:600;font-size:16px}
body.pti-app .pti-home-intro h2{margin:0;font-family:var(--heading);font-size:28px;font-weight:700;line-height:1.15;color:var(--text)}
body.pti-app .pti-home-intro p{margin:0;font-size:17px;max-width:70ch}
/* the cards */
body.pti-app .pti-home-card{display:flex;flex-direction:column;gap:12px;min-width:0;padding:24px}
body.pti-app .pti-home-card-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px}
body.pti-app .pti-home-card h3{margin:0;font-size:19px;font-weight:600;line-height:1.25}
body.pti-app .pti-home-card p{margin:0;font-size:15px}
body.pti-app .pti-home-card form{margin:auto 0 0}
body.pti-app .pti-home-wide{grid-column:1 / -1}
body.pti-app .pti-home-done::before{content:"";width:12px;height:12px;flex:none;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat}
/* The card buttons keep their long labels ("Case# 1 - ...: continue at question 6"), so they may wrap.
   Opening a test, starting or continuing a case, the whole-test report and buying are primary (navy);
   the sample, the passcode and a finished case's score are secondary. */
body.pti-app .pti-home-card input[type="submit"]{max-width:100%;height:auto;min-height:44px;padding:10px 20px;line-height:1.25}
body.pti-app .pti-home form[name="takeSample"] input[type="submit"],body.pti-app .pti-home form[name="sampleCases"] input[type="submit"],body.pti-app .pti-home form[name="passcodeForm"] input[type="submit"],body.pti-app .pti-home form[name="caseScore"] input[type="submit"]{background:#fff;border-color:var(--border-strong);color:var(--text)}
body.pti-app .pti-home form[name="takeSample"] input[type="submit"]:hover,body.pti-app .pti-home form[name="takeSample"] input[type="submit"]:focus,body.pti-app .pti-home form[name="sampleCases"] input[type="submit"]:hover,body.pti-app .pti-home form[name="sampleCases"] input[type="submit"]:focus,body.pti-app .pti-home form[name="passcodeForm"] input[type="submit"]:hover,body.pti-app .pti-home form[name="passcodeForm"] input[type="submit"]:focus,body.pti-app .pti-home form[name="caseScore"] input[type="submit"]:hover,body.pti-app .pti-home form[name="caseScore"] input[type="submit"]:focus{background:#F0F3F6;border-color:var(--border-strong);color:var(--text)}
/* the passcode card: the dashed card of the mockup, the box and its button on one line */
body.pti-app .pti-home-code{border-style:dashed;background:transparent;box-shadow:none}
body.pti-app .pti-home-code .form-group{display:flex;flex-wrap:wrap;align-items:flex-end;gap:8px;width:auto;margin:0;padding:0;font-size:inherit}
body.pti-app .pti-home-code label{display:block;flex:1 1 100%;margin:0}
body.pti-app .pti-home-code input[type="text"]{flex:1 1 200px;width:auto;min-width:0}
body.pti-app .pti-home-code .centeredBox{flex:none;margin:0;text-align:left}
/* the purchase card, across the grid: its heading and text, then the purchase form. Until PR #15 the form
   has the name and address boxes in a table; after it, only the button (or a log-in-again notice). */
body.pti-app .pti-home-buy{grid-column:1 / -1}
body.pti-app .pti-home-buy .pti-home-card-head,body.pti-app .pti-home-wide .pti-home-card-head{justify-content:flex-start}
body.pti-app .pti-home-buy .headerWelcomeText{display:flex;flex-direction:column;gap:12px;max-width:none;margin:0;padding:0;border:0;border-radius:0;font-size:inherit}
body.pti-app .pti-home-buy .headerWelcomeText p{max-width:70ch}
body.pti-app .pti-home-buy .headerWelcomeText > br,body.pti-app .pti-home-buy form > br,body.pti-app .pti-home-buy p:empty{display:none}
body.pti-app .pti-home-buy .centeredBox{margin:0;text-align:left}
body.pti-app .pti-home-buy form[name="choosetest"] input[type="submit"]{min-height:48px;padding:10px 24px;font-size:17px}
body.pti-app .pti-home-buy .style1r{color:var(--bad);font-size:15px;font-weight:600}
body.pti-app .pti-home-buy .formTable{width:100%;max-width:640px;margin:0;border:0;border-radius:0;border-collapse:collapse}
body.pti-app .pti-home-buy .formTable td{padding:0 0 12px;border:0;vertical-align:middle}
body.pti-app .pti-home-buy .formTable td.style1{width:190px;padding-right:16px;text-align:right;font-family:inherit;font-size:15px;font-weight:600;color:var(--text)}
body.pti-app .pti-home-buy .formTable input[type="text"],body.pti-app .pti-home-buy .formTable select,body.pti-app .pti-home-buy .formTable textarea{width:100%}
body.pti-app .pti-home-buy .formTable td[colspan]{padding:8px 0 0 190px;text-align:left}
body.pti-app .pti-home-buy .formTable td[colspan] table{width:auto;margin:0}
body.pti-app .pti-home-buy .formTable td[colspan] td{padding:0}
/* the notices of the passcode and sample steps (an error says so in words and with an icon) */
body.pti-app .pti-home-notice{position:relative;width:calc(100% - 48px);max-width:1132px;margin:24px auto 0;padding:12px 14px;border:1px solid #C5D3E3;border-radius:var(--radius);background:var(--accent-soft);color:var(--text);font-size:15px;line-height:1.45;text-align:left}
body.pti-app .pti-home-notice-error{padding-left:42px;border-color:#F1C5C1;background:var(--bad-soft);color:#8F1E18}
body.pti-app .pti-home-notice-error::before{content:"";position:absolute;left:14px;top:13px;width:18px;height:18px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M12 7v6M12 16.5v.5'/%3E%3C/svg%3E") center / contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M12 7v6M12 16.5v.5'/%3E%3C/svg%3E") center / contain no-repeat}
body.pti-app .pti-home-notice a{color:inherit;font-weight:600;text-decoration:underline;text-underline-offset:2px}
/* a missing-details message after Take Sample (../includes/adminPTI.php) prints after the grid */
body.pti-app .pti-home ~ .errorTable{width:calc(100% - 48px);max-width:1132px;margin:20px auto 0;border:1px solid #F1C5C1;border-radius:var(--radius);background:var(--bad-soft)}
body.pti-app .pti-home ~ .errorTable td{padding:12px 14px}
body.pti-app .pti-home ~ .errorTable .style1r{color:#8F1E18;font-size:15px}
/* a test without cases: its button (findTests) */
body.pti-app .pti-home-pick{width:calc(100% - 48px);max-width:1132px;margin:24px auto 0;text-align:left}
body.pti-app .pti-home-pick #chooseTest{display:block;margin:0}
@media (max-width:1000px){
	body.pti-app #chooseCaseBox.pti-home{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
	body.pti-app .pti-home,body.pti-app #chooseCaseBox.pti-home{grid-template-columns:minmax(0,1fr);gap:16px;padding:20px 20px 0}
	body.pti-app .pti-home-intro h2{font-size:24px}
	body.pti-app .pti-home-card{padding:20px}
	body.pti-app .pti-home-notice,body.pti-app .pti-home ~ .errorTable,body.pti-app .pti-home-pick{width:calc(100% - 40px)}
	body.pti-app .pti-home-code input[type="text"],body.pti-app .pti-home-code .centeredBox{flex:1 1 100%}
	body.pti-app .pti-home-buy .formTable,body.pti-app .pti-home-buy .formTable tbody,body.pti-app .pti-home-buy .formTable tr,body.pti-app .pti-home-buy .formTable td{display:block;width:100%}
	body.pti-app .pti-home-buy .formTable td.style1{width:auto;padding:0 0 6px;text-align:left}
	body.pti-app .pti-home-buy .formTable td[colspan]{padding-left:0}
	body.pti-app .pti-home-buy .formTable td[colspan] table{display:block;width:100%}
}
/* end app: member home */


/* ------------------------------------------------------------------ app: test screen */
/* docs/mockup/Test.html and TestPhone.html. The test screens (modules/findTestSessionCaseQuestion.php:
   startCase, startSession, gotoQuestion, and the sample's feedback from modules/free_sample.php) print the
   short test header (.pti-test-header) in place of the site header, so ".pti-test-header ~ .pti-main" is
   the page around them; their content sits in .pti-test, .pti-case-intro or .pti-session-intro. The test
   instructions (section testInstructions) keep the site header: .widerTextBoxBorderedCentered as a direct
   child of the page's <main> is theirs only. */

/* The short test header: the logo lockup, the badge, "Question N of M" and the progress bar */
body.pti-app .pti-test-bar{min-height:80px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 24px;padding-top:8px;padding-bottom:8px}
body.pti-app .pti-test-status{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:8px 14px;min-width:0}
body.pti-app .pti-test-count{font-weight:600;font-size:16px;color:var(--text);white-space:nowrap}
body.pti-app .pti-test-progress{height:4px;background:#EEF1F4}
body.pti-app .pti-test-progress span{display:block;height:100%;max-width:100%;background:var(--accent)}

/* Around a test screen the title box gives way to that header; Log Out stays, at the right */
body.pti-app .pti-test-header ~ .pti-main #chooseTestBox{padding:16px 24px 0;justify-content:flex-end}
body.pti-app .pti-test-header ~ .pti-main #testHeadTitle{display:none}

/* The layout: the narrative beside the question on a laptop, 5 to 7 as in the mockup; the sample's
   feedback and the session's opening text in one column */
body.pti-app .pti-test{max-width:1180px;margin:0 auto;padding:16px 24px 0;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:28px;align-items:start}
body.pti-app .pti-test-single{display:flex;flex-direction:column;align-items:stretch;gap:20px;max-width:808px}
body.pti-app .pti-question{display:flex;flex-direction:column;gap:20px;min-width:0}
body.pti-app .pti-question form{margin:0}
body.pti-app .pti-test-eyebrow{display:block;margin:0;font-size:14px;font-weight:600;line-height:1.3;color:var(--muted)}
body.pti-app .pti-test-eyebrow:empty{display:none}

/* Cards */
body.pti-app .pti-narrative,body.pti-app .pti-test #questionContainer,body.pti-app .pti-test-card,body.pti-app .pti-case-intro{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-card);box-shadow:var(--shadow);color:var(--text)}

/* The narrative panel: stays in view while the member answers (it scrolls inside when it is long). Its
   summary is the Show / Hide control at every width, in the sample and the full test alike */
body.pti-app .pti-narrative{position:sticky;top:24px;max-height:calc(100vh - 48px);overflow:auto;overscroll-behavior:contain;padding:24px}
body.pti-app .pti-narrative > summary{display:block;list-style:none;cursor:pointer;margin:0 0 14px;border-radius:var(--radius)}
body.pti-app .pti-narrative:not([open]) > summary{margin-bottom:0}
body.pti-app .pti-narrative:not([open]){position:static;max-height:none}/* hidden, it scrolls with the page: a pinned bar would sit under the answer cards */
/* Hidden on a laptop, the narrative is a bar above the question, which takes the full width */
@media (min-width:761px){body.pti-app .pti-test:has(> .pti-narrative:not([open])){grid-template-columns:minmax(0,1fr)}}
body.pti-app .pti-narrative > summary:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
body.pti-app .pti-narrative > summary::-webkit-details-marker{display:none}
body.pti-app .pti-narrative-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
body.pti-app .pti-narrative-titles{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1 1 auto}
body.pti-app .pti-narrative-title{font-family:var(--heading);font-weight:700;font-size:20px;line-height:1.2;color:var(--text)}
body.pti-app .pti-narrative-icon{display:none}
body.pti-app .pti-narrative-toggle{display:inline-flex;align-items:center;gap:6px;flex:none;font-size:14px;color:var(--muted)}
body.pti-app .pti-narrative-icon{color:var(--accent);flex:none}
body.pti-app .pti-narrative[open] .pti-when-closed,body.pti-app .pti-narrative:not([open]) .pti-when-open{display:none}
body.pti-app .pti-narrative[open] .pti-narrative-toggle svg{transform:rotate(180deg)}
body.pti-app .pti-narrative-body{display:flex;flex-direction:column;gap:16px}
/* the session's text */
body.pti-app .pti-test #questionInfoContainer{float:none;width:auto;max-width:none;height:auto;margin:0;padding:0;border:0;border-radius:0;background:none;font-size:16px;line-height:1.55;color:var(--text)}
body.pti-app .pti-test #questionInfoContainer p + p,body.pti-app .pti-test .clientInfoText p + p,body.pti-app .pti-case-intro .clientInfoText p + p{margin-top:12px}
/* the client info and Test Instructions buttons, secondary (app: shared), under a rule */
body.pti-app .pti-test .centeredContainerBox{max-width:none;margin:0;padding:16px 0 0;border:0;border-top:1px solid #EEF1F4;border-radius:0;text-align:left}
body.pti-app .pti-test #clientInfoButtonsContainer{display:flex;flex-wrap:wrap;gap:8px;height:auto;margin:0;padding:0;border:0;border-radius:0;text-align:left;clear:none}
body.pti-app .pti-test #clientInfoButtonsContainer form{display:flex;margin:0;max-width:100%}
body.pti-app .pti-test #clientInfoButtonsContainer .showInfoButton2{white-space:normal;max-width:100%}
/* a client info or the test instructions, opened in the panel, with its Close button */
body.pti-app .pti-narrative .clientInfoText{max-width:none;margin:0;padding:16px;border:1px solid var(--border);border-radius:var(--radius);background:var(--bg);text-align:left;font-size:15px;line-height:1.55}
body.pti-app .pti-narrative .clientInfoTitle{font-family:var(--heading);font-size:18px;font-weight:600;line-height:1.25;padding:0;margin:0 0 8px;border-radius:0}
body.pti-app .pti-narrative .clientInfoText form{margin:14px 0 0}
body.pti-app .pti-narrative .clearBoth{display:none}
body.pti-app .pti-narrative .widerTextBoxBorderedCentered{max-width:none;margin:0;padding:0;border:0;border-radius:0;background:none;text-align:left}
body.pti-app .pti-narrative .widerTextBoxBorderedCentered h1{font-size:18px;line-height:1.25;margin:12px 0 6px}
body.pti-app .pti-narrative .widerTextBoxBorderedCentered h1:first-child{margin-top:0}
body.pti-app .pti-narrative .widerTextBoxBorderedCentered h1 + br{display:none}
body.pti-app .pti-narrative .widerTextBoxBorderedCentered h2{font-size:16px;line-height:1.25;margin:12px 0 4px}
body.pti-app .pti-narrative .widerTextBoxBorderedCentered h3{font-size:15px;font-weight:700;line-height:1.25;margin:10px 0 4px}
body.pti-app .pti-narrative .widerTextBoxBorderedCentered ol,body.pti-app .pti-narrative .widerTextBoxBorderedCentered ul{margin:4px 0 10px;padding-left:20px}

/* The question card */
body.pti-app .pti-test #questionContainer{float:none;clear:none;width:auto;max-width:none;margin:0;padding:28px;display:flex;flex-direction:column;gap:20px}
body.pti-app .pti-test #questionTitleContainer{margin:0;padding:0;font-size:inherit;font-weight:400;display:flex;flex-direction:column;gap:10px}
body.pti-app .pti-test-qhead{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px 16px}
body.pti-app .pti-test-qlabel{font-weight:600;font-size:15px;color:var(--muted)}
body.pti-app .pti-test .pti-test-qtext{margin:0;font-family:var(--text-font);font-size:24px;font-weight:600;line-height:1.3;color:var(--text)}
body.pti-app .pti-test-result{margin:0;font-size:16px;color:var(--muted)}
/* "You must enter an answer", and the sample's "not saved": the alert, with its icon and words */
body.pti-app .pti-test .pti-test-alert{align-items:center;margin:0}
body.pti-app .pti-test-alert svg{flex:none}
body.pti-app .pti-test-alert br{display:none}
body.pti-app .pti-test-alert .alarmingText{text-transform:none;font-weight:600;color:inherit}

/* The options: each a card with its key; the radio inside is hidden but takes the keyboard (Tab, the arrows) */
body.pti-app .pti-test #questionAnswersContainer{float:none;width:auto;max-width:none;height:auto;margin:0;padding:0;border:0;border-radius:0;background:none;display:flex;flex-direction:column;gap:10px}
body.pti-app .pti-test .answerContainer.option{float:none;clear:none;width:auto;height:auto;margin:0;display:flex;align-items:flex-start;gap:12px;padding:14px 16px;font-size:17px;font-weight:400;line-height:1.4;color:var(--text)}
body.pti-app .pti-test .answerContainer .answerTextContainer{float:none;display:block;width:auto;flex:1 1 auto;min-width:0;margin:0;font-size:inherit}
body.pti-app .pti-test label.option{cursor:pointer;transition:border-color .15s ease,box-shadow .15s ease}
body.pti-app .pti-test label.option:hover{border-color:var(--accent)}
body.pti-app .pti-test .option input{margin:0;top:0;left:0}
/* picked: the navy ring on the card (where :has() works) and, everywhere, the key in navy and the text in bold */
body.pti-app .pti-test label.option:has(input:checked){border-color:var(--accent);box-shadow:0 0 0 1px var(--accent);background:#fff}
body.pti-app .pti-test label.option input:checked + .key{background:var(--accent);color:#fff}
body.pti-app .pti-test label.option input:checked ~ .answerTextContainer{font-weight:600}
/* the keyboard focus */
body.pti-app .pti-test label.option:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}
@supports not selector(:has(a)){body.pti-app .pti-test label.option:focus-within{outline:2px solid var(--accent);outline-offset:2px}}
/* after a sample answer: the correct option green, the member's wrong one red, both with words and an icon */
body.pti-app .pti-test div.option{cursor:default}
body.pti-app .pti-test .answerContainer.option-dim{color:var(--muted)}
body.pti-app .pti-test .option-correct .key{background:var(--ok);color:#fff}
body.pti-app .pti-test .option-incorrect .key{background:var(--bad);color:#fff}
body.pti-app .pti-test .option-correct .answerTextContainer,body.pti-app .pti-test .option-incorrect .answerTextContainer{font-weight:600}
body.pti-app .pti-test-mark{display:flex;align-items:center;gap:6px;margin-top:6px;font-size:14px;font-weight:700;line-height:1.3}
body.pti-app .pti-test-mark svg,body.pti-app .pti-test-qhead .badge svg{flex:none}
body.pti-app .option-correct .pti-test-mark{color:#155C27}
body.pti-app .option-incorrect .pti-test-mark{color:#8F1E18}

/* The one button: Next / Go to Session / Finish Case (the legacy submit classes are primary, app: shared) */
body.pti-app .pti-test .nextSubmitBox{clear:none;height:auto;margin:0;padding:0;display:flex;justify-content:flex-end;align-items:center;gap:12px;text-align:right}
body.pti-app .pti-test .nextSubmitBox form{margin:0}
body.pti-app .pti-test .nextSubmitBox input[type="submit"]{min-height:48px;padding:0 28px;font-size:17px}

/* The sample's Why card and learning points */
body.pti-app .pti-test-why{padding:24px;display:flex;flex-direction:column;gap:14px;border-color:#B9C7DA}
body.pti-app .pti-test-why-head{display:flex;flex-direction:column;gap:4px}
body.pti-app .pti-test-why h2{font-size:18px;line-height:1.2}
body.pti-app .pti-test-why-head p{font-size:14px}
body.pti-app .pti-test-why-list{display:flex;flex-direction:column;gap:8px}
body.pti-app .pti-test-why .ptiSampleRationale{flex:1 1 auto;min-width:0}
body.pti-app .pti-test-why .ptiSampleRationale p + p{margin-top:8px}
body.pti-app .pti-test-why .pti-why-correct{background:var(--ok-soft)}
body.pti-app .pti-test-why .pti-why-correct .key{background:var(--ok);color:#fff}
body.pti-app .pti-test-why .pti-why-correct strong{color:#155C27}
body.pti-app .pti-test-why .pti-why-incorrect{background:var(--bad-soft)}
body.pti-app .pti-test-why .pti-why-incorrect .key{background:var(--bad);color:#fff}
body.pti-app .pti-test-why .pti-why-incorrect strong{color:#8F1E18}
body.pti-app .pti-test .pti-test-learning{max-width:none;margin:0;padding:24px;text-align:left;font-size:16px;line-height:1.55}
body.pti-app .pti-test .pti-test-learning .clientInfoTitle{font-family:var(--heading);font-size:18px;font-weight:700;line-height:1.2;padding:0;margin:0 0 8px;border-radius:0}

/* startSession: the session's opening text, one card, Continue to Questions as its primary button */
body.pti-app .pti-session-intro{padding:28px;display:flex;flex-direction:column;gap:8px}
body.pti-app .pti-session-intro .fullWidthVerticalSpacer{display:none}
body.pti-app .pti-session-intro .clientInfoText{max-width:none;margin:0;padding:0;border:0;border-radius:0;background:none;text-align:left;font-size:17px;line-height:1.6}
body.pti-app .pti-session-intro .clientInfoTitle{font-family:var(--heading);font-size:26px;font-weight:700;line-height:1.2;padding:0;margin:0 0 12px;border-radius:0}
body.pti-app .pti-session-intro .clientInfoText form{margin:24px 0 0;display:flex;justify-content:flex-end}
body.pti-app .pti-main .pti-session-intro input[type="submit"].smallSubmitButton{min-height:48px;padding:0 28px;border-color:var(--accent);background:var(--accent);color:#fff;font-size:17px}
body.pti-app .pti-main .pti-session-intro input[type="submit"].smallSubmitButton:hover,body.pti-app .pti-main .pti-session-intro input[type="submit"].smallSubmitButton:focus{border-color:var(--accent-strong);background:var(--accent-strong);color:#fff}

/* startCase: the client information, then the sessions (the first one open, the rest greyed out) */
body.pti-app .pti-case-intro{width:calc(100% - 48px);max-width:760px;height:auto;margin:16px auto 0;padding:28px;display:flex;flex-direction:column;gap:12px;text-align:left}
body.pti-app .pti-case-intro > br{display:none}
body.pti-app .pti-case-intro .testSectionTitle{font-family:var(--heading);font-size:26px;font-weight:700;line-height:1.2}
body.pti-app .pti-case-intro .pti-test-eyebrow + .testSectionTitle{margin-top:-6px}
body.pti-app .pti-case-intro hr ~ .testSectionTitle{font-size:20px}
body.pti-app .pti-case-intro .clientInfoText{max-width:none;margin:0;padding:0;border:0;border-radius:0;background:none;text-align:left;font-size:17px;line-height:1.6}
body.pti-app .pti-case-intro .clientInfoTitle{font-family:var(--heading);font-size:18px;font-weight:600;line-height:1.25;padding:0;margin:0 0 6px;border-radius:0}
body.pti-app .pti-case-intro hr{height:0;margin:12px 0;border:0;border-top:1px solid var(--border);background:none;opacity:1}
body.pti-app .pti-case-intro form{margin:0}
body.pti-app .pti-main .pti-case-intro input[type="submit"]:disabled,body.pti-app .pti-main .pti-case-intro input[type="submit"]:disabled:hover{border-color:#EEF1F4;background:#EEF1F4;color:#8A97A6;cursor:default}

/* The test instructions: the instructions as a card in the page column, then the "I have read the
   instructions" box with Proceed to Test (no class: primary, app: shared) */
body.pti-app .pti-main > .widerTextBoxBorderedCentered,body.pti-app .pti-main > .widerTextBoxBorderedCentered ~ .centeredBox{width:calc(100% - 48px);max-width:860px;margin:0 auto 0 max(24px, calc((100% - 1132px) / 2));background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-card);box-shadow:var(--shadow);color:var(--text);text-align:left}
body.pti-app .pti-main > .widerTextBoxBorderedCentered{padding:32px 36px;font-size:17px;line-height:1.6}
body.pti-app .pti-main > .clearBoth:has(+ .widerTextBoxBorderedCentered){display:none}
body.pti-app .pti-main > .widerTextBoxBorderedCentered h1{font-size:28px;line-height:1.2;margin:16px 0 10px}
body.pti-app .pti-main > .widerTextBoxBorderedCentered h1:first-child{margin-top:0}
body.pti-app .pti-main > .widerTextBoxBorderedCentered h1 + br{display:none}
body.pti-app .pti-main > .widerTextBoxBorderedCentered h2{font-size:22px;line-height:1.25;margin:16px 0 8px}
body.pti-app .pti-main > .widerTextBoxBorderedCentered h3{font-size:18px;font-weight:600;line-height:1.3;margin:14px 0 6px}
body.pti-app .pti-main > .widerTextBoxBorderedCentered ol,body.pti-app .pti-main > .widerTextBoxBorderedCentered ul{margin:6px 0 14px;padding-left:24px}
body.pti-app .pti-main > .widerTextBoxBorderedCentered li{margin:4px 0}
body.pti-app .pti-main > .widerTextBoxBorderedCentered li ul{margin:4px 0 0}
body.pti-app .pti-main > .widerTextBoxBorderedCentered ~ .centeredBox{padding:20px 24px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px 24px;font-size:17px;font-weight:600}
body.pti-app .pti-main > .widerTextBoxBorderedCentered ~ .centeredBox br{display:none}
body.pti-app .pti-main > .widerTextBoxBorderedCentered ~ .centeredBox form{margin:0}
body.pti-app .pti-main > .widerTextBoxBorderedCentered ~ .centeredBox input[type="submit"]{min-height:48px;padding:0 28px;font-size:17px}

/* Phones: one column; the narrative folds above the question and opens with one tap; full-width buttons */
@media (max-width:760px){
	body.pti-app .pti-test-header .pti-wrap{padding:0 16px}
	body.pti-app .pti-test-bar{min-height:64px;gap:8px 12px}
	body.pti-app .pti-test-header .pti-brand{gap:10px}
	body.pti-app .pti-test-header .pti-brand img{height:44px}
	body.pti-app .pti-test-status{flex-direction:column;align-items:flex-end;gap:4px}
	body.pti-app .pti-test-count{order:-1;font-size:15px}
	body.pti-app .pti-test-header ~ .pti-main #chooseTestBox{padding:12px 16px 0}
	body.pti-app .pti-test{grid-template-columns:minmax(0,1fr);gap:14px;padding:12px 16px 0}
	body.pti-app .pti-test-single{gap:14px}
	body.pti-app .pti-narrative{position:static;max-height:none;overflow:visible;padding:0}
	body.pti-app .pti-narrative > summary{min-height:52px;margin:0;padding:12px 16px}
	body.pti-app .pti-narrative[open] > summary{border-bottom:1px solid #EEF1F4}
	body.pti-app .pti-narrative-icon{display:inline-flex}
	body.pti-app .pti-narrative-title{font-family:var(--text-font);font-size:17px;font-weight:600}
	body.pti-app .pti-narrative-body{padding:16px}
	body.pti-app .pti-test #clientInfoButtonsContainer form{width:100%}
	body.pti-app .pti-test #questionContainer{padding:20px;gap:16px}
	body.pti-app .pti-test .pti-test-qtext{font-size:20px;line-height:1.35}
	body.pti-app .pti-test .answerContainer.option{min-height:56px;padding:14px}
	body.pti-app .pti-test .nextSubmitBox,body.pti-app .pti-test .nextSubmitBox form{display:block}
	body.pti-app .pti-test .nextSubmitBox input[type="submit"]{width:100%;min-height:52px}
	body.pti-app .pti-test-why,body.pti-app .pti-test .pti-test-learning,body.pti-app .pti-session-intro{padding:20px}
	body.pti-app .pti-session-intro .clientInfoTitle{font-size:22px}
	body.pti-app .pti-session-intro .clientInfoText form{display:block}
	body.pti-app .pti-main .pti-session-intro input[type="submit"].smallSubmitButton{width:100%;min-height:52px}
	body.pti-app .pti-case-intro{width:calc(100% - 32px);margin-top:12px;padding:20px}
	body.pti-app .pti-case-intro .testSectionTitle{font-size:22px}
	body.pti-app .pti-main > .widerTextBoxBorderedCentered,body.pti-app .pti-main > .widerTextBoxBorderedCentered ~ .centeredBox{width:calc(100% - 40px);margin-left:20px}
	body.pti-app .pti-main > .widerTextBoxBorderedCentered{padding:20px}
	body.pti-app .pti-main > .widerTextBoxBorderedCentered h1{font-size:24px}
	body.pti-app .pti-main > .widerTextBoxBorderedCentered h2{font-size:20px}
	body.pti-app .pti-main > .widerTextBoxBorderedCentered ~ .centeredBox{flex-direction:column;align-items:stretch;padding:20px}
	body.pti-app .pti-main > .widerTextBoxBorderedCentered ~ .centeredBox input[type="submit"]{width:100%}
}
@media (max-width:359px){
	body.pti-app .pti-test-header .pti-brand img{height:36px}
	body.pti-app .pti-test-count{font-size:14px}
}
/* Windows High Contrast drops the borders and the ring: show the real radio there */
@media (forced-colors: active){body.pti-app .pti-test .option input{position:static;opacity:1;width:auto;height:auto;flex:none;margin:4px 0 0}}
/* end app: test screen */


/* ------------------------------------------------------------------ app: score */
/* The member report (examAcePTI_Test.php, cmd displayscore): one card with the score and a row per
   content area with a missed answer; beside it, for a free-sample
   visitor, the pitch (modules/free_sample.php); for a member, Back to your cases under it */
body.pti-app .ptiScore{max-width:1180px;margin:0 auto;padding:24px 24px 0;display:grid;grid-template-columns:minmax(0,760px);gap:20px;align-items:start}
body.pti-app .ptiScoreSample{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:28px}
body.pti-app .ptiScoreCard{display:flex;flex-direction:column;gap:24px;padding:32px;margin:0;text-align:left}
body.pti-app .ptiScoreHead{display:flex;flex-direction:column;gap:6px}
body.pti-app .ptiScoreKicker{color:var(--muted);font-weight:600;font-size:15px}
body.pti-app .ptiScoreTitle{font-size:24px;line-height:1.2}
body.pti-app .ptiScoreLine{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin-top:10px}
body.pti-app .ptiScoreBig{font-family:var(--heading);font-size:64px;font-weight:700;line-height:1;color:var(--text)}
body.pti-app .ptiScoreOf{font-size:22px;color:var(--muted)}
body.pti-app .ptiScorePct{margin-left:auto;font-family:var(--heading);font-size:28px;font-weight:700;line-height:1;color:var(--text)}
body.pti-app .ptiScoreMeta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin-top:8px}
body.pti-app .ptiScoreNote{color:var(--muted);font-size:16px}
/* The content areas: the old boxes (css/tonys.css) become rows */
body.pti-app #reportContainer.ptiAreas{width:auto;margin:0;padding:20px 0 0;border:0;border-top:1px solid #EEF1F4;border-radius:0;display:flex;flex-direction:column;gap:0}
body.pti-app #reportContainer.ptiAreasNone{display:none}
body.pti-app .ptiAreasTitle{font-size:19px;font-weight:600;margin:0 0 4px}
body.pti-app .reportCategoryContainer.ptiArea{width:auto;margin:0;padding:16px 0;border:0;border-bottom:1px solid #EEF1F4;border-radius:0;background:none;display:flex;flex-direction:column;gap:8px;text-align:left}
body.pti-app .reportCategoryContainer.ptiArea:last-child{border-bottom:0;padding-bottom:0}
body.pti-app .ptiAreaHead{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 16px}
body.pti-app .ptiAreaName{font-weight:600;font-size:17px}
body.pti-app .ptiAreaScore{color:var(--muted);font-size:15px;white-space:nowrap}
body.pti-app .ptiAreaScore strong{color:var(--text);font-family:var(--heading);font-size:18px}
body.pti-app .ptiAreaMissed{display:flex}
body.pti-app .ptiAreaText{color:var(--muted);font-size:15px;line-height:1.5}
/* Back to your cases, under the card */
body.pti-app .ptiScoreActions{margin:0;text-align:left}
body.pti-app .ptiScoreActions form{margin:0}
/* The free sample's pitch: a card beside the score */
body.pti-app .ptiSamplePitch{display:flex;flex-direction:column;gap:20px;margin:0;padding:32px;text-align:left;border-color:#B9C7DA}
body.pti-app .ptiPitchHead{display:flex;flex-direction:column;gap:8px}
body.pti-app .ptiPitchTitle{font-size:26px;line-height:1.2}
body.pti-app .ptiPitchActions{display:flex;flex-direction:column;gap:10px;margin-top:4px}
body.pti-app .ptiPitchActions form{margin:0;display:flex}
body.pti-app .ptiPitchActions input[type="submit"].showInfoButton,body.pti-app .ptiPitchActions .btn{width:100%;min-height:48px;padding:0 24px;font-size:17px}/* outranks the shared submit rule */
body.pti-app .ptiPitchActions a.btn-secondary:hover,body.pti-app .ptiPitchActions a.btn-secondary:focus{border-color:var(--border-strong);box-shadow:none}/* Bootstrap 5 darkens the border */
body.pti-app .ptiPitchMember{color:var(--muted);font-size:14px}
body.pti-app .ptiPitchEnded{padding-top:16px;border-top:1px solid #EEF1F4;color:var(--muted);font-size:15px;font-weight:600}
/* The notice when the sign-in has ended */
body.pti-app .ptiScoreNotice{margin:0;padding:24px;text-align:left}
@media (max-width:960px){body.pti-app .ptiScoreSample{grid-template-columns:minmax(0,760px);gap:20px}}
@media (max-width:760px){
	body.pti-app .ptiScore,body.pti-app .ptiScoreSample{grid-template-columns:minmax(0,1fr);padding:20px 20px 0;gap:20px}
	body.pti-app .ptiScoreCard,body.pti-app .ptiSamplePitch{padding:20px}
	body.pti-app .ptiScoreTitle{font-size:22px}
	body.pti-app .ptiScoreBig{font-size:52px}
	body.pti-app .ptiScoreOf{font-size:19px}
	body.pti-app .ptiScorePct{font-size:24px}
	body.pti-app .ptiPitchTitle{font-size:22px}
	body.pti-app .ptiScoreNotice{padding:20px}
}
/* end app: score */