/* Prechange platform: the website's colours and type, kept simple. Fonts are served from this app. */
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:300 400;font-display:swap;src:url(/assets/fonts/cormorant-garamond-normal.woff2) format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:400;font-display:swap;src:url(/assets/fonts/cormorant-garamond-italic.woff2) format('woff2')}
@font-face{font-family:'Jost';font-style:normal;font-weight:300 500;font-display:swap;src:url(/assets/fonts/jost-normal.woff2) format('woff2')}

:root{
  --paper:#F6F2EA;--ink:#0C203B;--text:#1F2530;--grey:#535B68;--accent:#2E6B66;--accent-dk:#23524E;
  --gold:#D4B15F;--line:#D9D6CC;--field:#737A85;--error:#7A2E2A;--ok-bg:#E6EFE9;--err-bg:#F4E6E4;
  --serif:'Cormorant Garamond',Georgia,serif;--sans:'Jost',system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--paper);color:var(--text);font-family:var(--sans);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:var(--accent)}
.wrap{max-width:760px;margin:0 auto;padding:0 20px}
.skip{position:absolute;left:-999px}.skip:focus{left:12px;top:12px;background:#fff;padding:8px 12px;z-index:10}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

header{border-bottom:1px solid var(--line);background:rgba(246,242,234,.95)}
.bar{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:56px;flex-wrap:wrap}
.brand{display:inline-flex;align-items:center;gap:10px;font-family:var(--serif);font-size:20px;color:var(--ink);text-decoration:none}
/* The logo: the door and the gold step (navy door here; results.css draws it cream on navy) */
.logo{width:34px;height:25px;flex:none}
.logo .door{fill:none;stroke:var(--ink);stroke-width:12}
.logo .knob{fill:var(--ink)}
.logo .step{fill:var(--gold)}
/* Icons drawn from the page's symbols (the condition icons) */
.symbols{position:absolute;width:0;height:0;overflow:hidden}
.ic{width:20px;height:20px;flex:none;vertical-align:-4px;color:var(--accent);stroke-width:1.5}
nav{display:flex;gap:18px;align-items:center}
nav a,nav .link{color:var(--ink);text-decoration:none}
/* No all capitals anywhere in the app (Sukant, 6 Oct 2026) */
.label{font-size:14px;font-weight:500;letter-spacing:.01em}
form.inline{display:inline}
button.link{background:none;border:0;font:inherit;letter-spacing:inherit;text-transform:inherit;cursor:pointer;padding:0}

main.wrap{padding:36px 20px 56px}
h1,h2,h3{font-family:var(--serif);font-weight:300;color:var(--ink);line-height:1.15}
h1{font-size:clamp(30px,6vw,42px);margin-bottom:14px}
h2{font-size:clamp(23px,4.5vw,30px);margin:30px 0 10px}
h3{font-size:21px;font-weight:400;margin:22px 0 8px}
p+p,p+ul,ul+p{margin-top:12px}
ul{padding-left:20px}
.lead{font-size:17px;color:var(--grey)}
.small,small{font-size:13px;color:var(--grey)}
footer{padding:24px 20px 40px;border-top:1px solid var(--line)}

.card{background:#FFFDF9;border:1px solid var(--line);padding:22px;margin:20px 0}
.choices{display:grid;gap:12px;margin:20px 0}
.choices a{display:block;background:#FFFDF9;border:1px solid var(--line);padding:16px 18px;color:var(--ink);text-decoration:none}
.choices a:hover{border-color:var(--accent)}
.choices strong{display:block;font-weight:500}

form.stack{display:grid;gap:16px;margin-top:20px}
.field{display:grid;gap:6px}
.field span{font-weight:500}
.optional{font-style:normal;font-weight:400;color:var(--grey)}
input[type=text],input[type=email],input[type=password],input[type=url],input[type=number],select,textarea{
  width:100%;font:inherit;padding:10px 12px;border:1px solid var(--field);background:#fff;color:var(--text);border-radius:2px}
textarea{min-height:140px}
.check{display:flex;gap:10px;align-items:flex-start}
.check input{margin-top:5px;width:18px;height:18px;flex:none}
fieldset{border:0}
legend{font-weight:500;margin-bottom:8px}

.button,button.primary,button.secondary{display:inline-block;font:inherit;font-size:15px;font-weight:500;letter-spacing:.01em;
  padding:13px 20px;border:1px solid var(--accent);cursor:pointer;text-decoration:none;border-radius:2px}
button.primary,.button{background:var(--accent);color:#fff}
button.primary:hover,.button:hover{background:var(--accent-dk)}
button.secondary{background:#fff;color:var(--accent)}
.buttons{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.or{margin:18px 0;color:var(--grey)}

.notice{padding:14px 16px;margin:16px 0;border-left:3px solid var(--accent);background:var(--ok-bg)}
.notice.error{border-color:var(--error);background:var(--err-bg)}
.notice ul{margin-top:6px}

table{width:100%;border-collapse:collapse;margin:14px 0;font-size:14px}
th,td{text-align:left;padding:8px 6px;border-bottom:1px solid var(--line);vertical-align:top}
th{font-weight:500}
.mono{font-family:ui-monospace,Menlo,monospace;font-size:13px;word-break:break-all}
/* Long links (such as sign-up confirmations) wrap inside the box (Sukant, 7 Oct 2026) */
pre.mail{white-space:pre-wrap;overflow-wrap:anywhere;background:#fff;border:1px solid var(--line);padding:12px;font-size:13px}

/* Partner fields: LinkedIn picture hint, "Is this you?", "We read this as" (ARCHITECTURE.md §4) */
.field-group{display:grid;gap:8px}
figure.hint{margin:0;display:grid;gap:4px}
figure.hint img{width:100%;max-width:480px;height:auto}
figure.hint figcaption{font-size:13px;color:var(--grey)}
.read-as,.linkedin-check{font-size:14px;color:var(--grey)}
.read-as strong{color:var(--ink);font-weight:500}
[hidden]{display:none !important}

/* Unconfirmed email: shown prominently on the account page */
.card.confirm{border-left:4px solid var(--accent)}
.card.confirm h2{margin-top:0}
.card.confirm form{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:14px}
/* "Send it again" looks like the "Change it" link beside it */
.small button.link,.card button.link{color:var(--accent);text-decoration:underline;font-size:inherit}

/* Connect with Sukant on LinkedIn: quiet, with a small photo (Q50, Q51) */
.card.connect{display:grid;gap:10px;justify-items:start}
.connect-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px}
.button.outline{background:#fff;color:var(--accent)}
.button.outline:hover{background:var(--ok-bg)}
.connect-button{display:inline-flex;align-items:center;gap:12px;padding:6px 18px 6px 6px;border-radius:999px}
.connect-button img{width:40px;height:40px;border-radius:50%;object-fit:cover;flex:none}
.connect-name{font-size:14px;color:var(--grey)}

/* Copy boxes: a Room's link and its ready-made reminder, each with its Copy button (C72) */
.copy-box,.copy-card{background:#fff;border:1px solid var(--line);border-radius:2px;margin:10px 0 12px}
.copy-box{display:flex;align-items:stretch}
.copy-text{flex:1;min-width:0;align-self:center;padding:14px 16px;font-family:ui-monospace,Menlo,monospace;font-size:14px;color:var(--ink);word-break:break-all}
.copy-card pre.mail{border:0;background:none;padding:18px 20px;font-family:var(--sans);font-size:15px;line-height:1.65;color:var(--text)}
.copy-foot{display:flex;justify-content:flex-end;border-top:1px solid var(--line);background:#FBF9F4}
button.copy{display:inline-flex;align-items:center;justify-content:center;gap:9px;flex:none;min-height:50px;padding:0 20px;
  font:inherit;font-size:14px;font-weight:500;letter-spacing:.01em;white-space:nowrap;
  color:var(--accent);background:#FBF9F4;border:0;border-left:1px solid var(--line);cursor:pointer;transition:background .15s,color .15s}
button.copy::before{content:"";width:16px;height:16px;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='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='12' height='12' rx='2'/%3E%3Cpath d='M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1'/%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' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='12' height='12' rx='2'/%3E%3Cpath d='M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1'/%3E%3C/svg%3E") center/contain no-repeat}
button.copy:hover{background:var(--ok-bg)}
button.copy.is-copied{background:var(--accent);color:#fff}
button.copy.is-copied::before{
  -webkit-mask-image: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.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  mask-image: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.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")}
.copy-foot button.copy{border-left:1px solid var(--line)}
@media (max-width:560px){
  .copy-box{flex-direction:column}
  .copy-box button.copy{border-left:0;border-top:1px solid var(--line)}
  .copy-foot button.copy{flex:1;border-left:0}
}

/* The Check, one statement per screen (ARCHITECTURE.md v51 §7A, C73). Without check.js the screens
   show as one list of cards; with it, only the current screen shows. Phones first. */
.check-form{margin:24px 0 48px}
.steps{list-style:none;padding:0;display:grid;gap:20px}
.step{background:#FFFDF9;border:1px solid var(--line);padding:22px 20px 20px}
.step:focus{outline:none}
.step{scroll-margin-top:12px}
.one-at-a-time .step{display:none}
.one-at-a-time .step.current{display:block;animation:step-in .22s ease-out}
@keyframes step-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.one-at-a-time .step.current{animation:none}}
.progress{display:flex;align-items:center;gap:14px;margin-bottom:18px;font-size:13px;font-weight:500;letter-spacing:.01em;color:var(--grey);white-space:nowrap}
.meter{display:block;flex:1;min-width:0;height:3px;background:var(--line);border-radius:2px;overflow:hidden}
.meter-fill{fill:var(--accent)}
.statement legend{font-family:var(--serif);font-weight:400;color:var(--ink);font-size:clamp(25px,6vw,31px);line-height:1.22;margin-bottom:22px}
.answers{display:grid;gap:10px}
.answer{position:relative;display:block;cursor:pointer}
.answer input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.answer span{display:flex;align-items:center;gap:14px;min-height:58px;padding:12px 18px;background:#fff;border:1px solid var(--line);
  border-radius:2px;font-size:17px;color:var(--ink);transition:background .15s,border-color .15s,color .15s}
.answer span::before{content:"";flex:none;width:18px;height:18px;border:1.5px solid var(--field);border-radius:50%;background:#fff;transition:border-color .15s,box-shadow .15s}
@media (hover:hover){.answer:hover span{border-color:var(--accent)}}
.answer input:checked+span{background:var(--accent);border-color:var(--accent);color:#fff}
.answer input:checked+span::before{border-color:#fff;background:var(--accent);box-shadow:inset 0 0 0 3px var(--accent),inset 0 0 0 9px #fff}
.answer input:focus-visible+span{outline:2px solid var(--ink);outline-offset:3px}
.step-nav{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:18px}
button.back{background:none;border:0;padding:12px 4px;font:inherit;font-size:15px;font-weight:500;letter-spacing:.01em;color:var(--accent);cursor:pointer}
button.back::before{content:"\2190";margin-right:8px}
button.back:hover{color:var(--accent-dk);text-decoration:underline}
.check-form:not(.one-at-a-time) button.back{display:none}
.check-form:not(.one-at-a-time) .done .step-nav{justify-content:flex-end}
.done>*+*{margin-top:18px}
.done-lead{font-family:var(--serif);font-size:clamp(23px,5vw,27px);line-height:1.25;color:var(--ink)}
/* The profile questions (launch item 5, C95): one short screen before statement 1. The answers are
   compact so all three questions fit a phone screen. */
.profile-title{font-family:var(--serif);font-weight:400;font-size:clamp(23px,5vw,27px);line-height:1.25;color:var(--ink);margin:0}
.profile-lead{font-size:15px;color:var(--grey);margin:8px 0 0}
.profile-question{margin-top:22px}
.profile-question legend{font-size:16px;font-weight:500;color:var(--ink);margin-bottom:10px}
.profile-choices{display:flex;flex-wrap:wrap;gap:8px}
.profile-choice{position:relative;cursor:pointer}
.profile-choice input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.profile-choice span{display:inline-flex;align-items:center;min-height:40px;padding:7px 13px;background:#fff;border:1px solid var(--line);border-radius:2px;
  font-size:15px;color:var(--ink);transition:background .15s,border-color .15s,color .15s}
@media (hover:hover){.profile-choice:hover span{border-color:var(--accent)}}
.profile-choice input:checked+span{background:var(--accent);border-color:var(--accent);color:#fff}
.profile-choice input:focus-visible+span{outline:2px solid var(--ink);outline-offset:3px}
.profile-error{margin:16px 0 0;color:var(--error);font-size:15px}
.profile-error:empty{display:none}
.profile .step-nav{margin-top:22px}
.check-form:not(.one-at-a-time) .profile .step-nav{display:none}
@media (min-width:640px){
  .step{padding:30px 32px 26px}
  .answer span{min-height:54px}
}

.check-head + .check-lead{margin-top:12px}
/* Honest-answer wording under the opening line (v67 §7) */
.check-honest{font-size:16px;color:var(--grey);margin:8px 0 0}

/* Phones: a compact top bar on every page, and a compact Room header on the Check, so statement 1
   fits the screen (Sukant, 6 Oct 2026) */
@media (max-width:640px){
  .bar{flex-wrap:wrap;column-gap:12px;row-gap:2px;min-height:50px}
  .brand{font-size:17px;white-space:nowrap;gap:7px}
  nav{gap:12px}
  nav.label{font-size:13px;white-space:nowrap}
  .logo{width:24px;height:18px}
  main.wrap{padding-top:22px}
  .check-head{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:8px;row-gap:2px}
  .check-head h1{font-size:23px;margin:0}
  .check-head-title{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .check-head-by{margin:0;font-size:14px;color:var(--grey)}
  .check-head-by::before{content:"· "}
  .check-head-until{flex-basis:100%;margin:0;font-size:13px;color:var(--grey)}
  .check-head + .check-lead,.check-lead{font-size:14px;margin-top:8px}
  .check-honest{font-size:14px;margin-top:6px}
  .check-form{margin-top:14px}
  .step{padding:16px 16px 14px}
  .progress{margin-bottom:12px}
  .statement legend{font-size:22px;margin-bottom:14px}
  .answers{gap:8px}
  .answer span{min-height:48px;padding:10px 14px;font-size:16px}
  .step-nav{margin-top:12px}
  .profile-question{margin-top:16px}
  .profile-question legend{margin-bottom:8px}
  .profile-choices{gap:7px}
  .profile-choice span{min-height:38px;padding:6px 11px;font-size:15px}
}

/* The admin overview (launch item 9; layout by Sukant's request, 7 Oct 2026). A wider page; the totals as
   three tiles, the controls in one panel, the breakdown table in its own box (it scrolls sideways inside
   it, never the page), the smaller sections in two columns. */
.wide-page .wrap{max-width:1160px}
.wide-page main.wrap h1{margin-bottom:22px}
.ov-panel{background:#FFFDF9;border:1px solid var(--line);padding:22px 24px;margin:20px 0 0}
.ov-panel h2{font-size:25px;font-weight:400;margin:0 0 12px}
.ov-panel table{margin:0}
.ov-panel th{font-size:13px;color:var(--grey)}
.ov-none{color:var(--grey);font-size:15px}
.num{text-align:right;font-variant-numeric:tabular-nums}

/* The totals */
.ov-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.ov-tile{background:#FFFDF9;border:1px solid var(--line);border-top:3px solid var(--accent);padding:18px 22px 16px;display:grid;gap:6px}
.ov-tile h2.ov-tile-name{font-family:var(--sans);font-size:15px;font-weight:500;color:var(--ink);margin:0;line-height:1.3}
.ov-tile-main{display:flex;align-items:baseline;gap:10px}
.ov-big{font-family:var(--serif);font-size:52px;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums}
.ov-period{font-size:13px;color:var(--grey)}
.ov-tile-more{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:8px;padding-top:12px;border-top:1px solid var(--line)}
.ov-tile-more dt{font-size:13px;color:var(--grey)}
.ov-tile-more dd{font-size:20px;color:var(--ink);font-variant-numeric:tabular-nums;line-height:1.3}

/* The controls: break down by, the filters, and the buttons along the bottom */
.ov-controls{margin-top:28px}
.ov-controls .field>span{font-size:13px;font-weight:500;color:var(--grey)}
.ov-controls select{padding:7px 10px;font-size:15px;min-height:40px}
.ov-by{max-width:340px}
.ov-by>span{color:var(--ink) !important;font-size:15px !important}
.ov-filter{margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}
.ov-filter legend{float:left;width:100%;margin:0 0 12px;font-size:15px;font-weight:500;color:var(--ink)}
.overview-filters{clear:both;display:grid;grid-template-columns:repeat(auto-fill,minmax(196px,1fr));gap:14px 16px}
/* A chosen filter stands out */
.ov-controls select:has(option:checked:not([value=""])){border-color:var(--accent);background:var(--ok-bg);color:var(--ink)}
.ov-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px;margin:24px -24px -22px;padding:16px 24px;border-top:1px solid var(--line);background:#FBF9F4}
.ov-actions button.primary,.ov-actions .button{padding:10px 22px;font-size:15px}
.ov-actions .ov-export{margin-left:auto}

/* The breakdown table */
.overview-wrap{overflow-x:auto;max-width:100%}
.ov-table-panel{padding:0;margin-top:20px}
.overview-table{font-size:15px;min-width:760px}
.overview-table th,.overview-table td{padding:11px 14px;white-space:nowrap}
.overview-table thead th{background:#FBF9F4;color:var(--ink);font-size:13px;vertical-align:bottom}
.overview-table thead tr:first-child th{font-size:14px;border-bottom:1px solid var(--line)}
.overview-table .gs{border-left:1px solid var(--line)}
.overview-table th:first-child,.overview-table td:first-child{position:sticky;left:0;background:#FFFDF9;z-index:1;white-space:normal;min-width:150px}
.overview-table thead th:first-child{background:#FBF9F4}
.overview-table tbody tr:hover td{background:#F7F3EA}
.overview-table tbody tr:last-child td{border-bottom:0}
.overview-table th a{color:inherit;text-decoration:none;font-weight:400}
.overview-table th a:hover{text-decoration:underline}
.overview-table th.sorted a{font-weight:500;color:var(--accent)}
.overview-table th.sorted a::after{content:"\2193";margin-left:5px}
.overview-table th.sorted.asc a::after{content:"\2191"}
.ov-fewer{color:var(--grey);font-style:italic}
p.ov-fewer{font-style:normal;font-size:15px}

/* The smaller sections */
.ov-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:44px;align-items:start}
.ov-grid .ov-panel{margin:0;min-width:0}
.ov-span{grid-column:1/-1}
.ov-row-actions{text-align:right;white-space:nowrap;vertical-align:middle}
.ov-row-actions a{margin-right:14px}
.ov-row-actions button.secondary{padding:7px 14px;font-size:14px;white-space:nowrap}
.ov-panel tbody tr:last-child td{border-bottom:0}
.ov-list p{font-size:15px}
.ov-list p a{display:table;margin-top:6px}
.ov-list td{overflow-wrap:anywhere}

@media (max-width:860px){
  .ov-grid{grid-template-columns:minmax(0,1fr)}
  .ov-tiles{gap:12px}
  .ov-big{font-size:42px}
}
@media (max-width:640px){
  .ov-tiles{grid-template-columns:minmax(0,1fr)}
  .ov-panel{padding:18px 16px}
  .ov-actions{margin:20px -16px -18px;padding:14px 16px}
  .ov-actions .ov-export{margin-left:0}
  .ov-by{max-width:none}
  .ov-grid{margin-top:32px}
  .ov-tile{padding:14px 16px 12px;gap:2px}
  .ov-big{font-size:38px}
  .ov-tile-more{margin-top:6px;padding-top:8px}
  .ov-tile-more dd{font-size:17px}
  .ov-panel th,.ov-panel td{padding:8px 6px}
  .ov-row-actions{white-space:normal}
  .ov-row-actions a{display:block;margin:0 0 8px}
}