/* Anatomy-style trial. Type, colour and rules taken from thecontextforge.com/racetronix/anatomy.
   Legibility changes from the source: mono labels 11-12px #7A848D -> 14px #4A535B (7.9:1),
   notes 14px #5E6870 -> 16px #4A535B. Nothing under 14px. */
:root{
  --ink:#14171A; --body:#2B2E33; --soft:#4A535B; --rule:#1D2126; --hair:#CBD3D8;
  --paid:#F4F5F6; --ours:#F8EFE9; --brown:#7E3F20; --amber:#EB9800; --focus:#0B57D0;
}
*{box-sizing:border-box}
html,body{margin:0;background:#FFFFFF}
body{color:var(--body);font:400 17px/1.62 'Instrument Sans',system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.wrap{max-width:1240px;margin:0 auto;padding:0 40px 80px}

.mono{font:500 14px/1.3 'IBM Plex Mono',monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--soft)}
.caps{font-family:'Figtree',sans-serif;font-weight:700;font-size:17px;line-height:1.2;letter-spacing:.035em;text-transform:uppercase;color:var(--ink);margin:0}
.note{margin:0;font-size:16px;line-height:1.5;color:var(--soft)}

.top{display:flex;align-items:center;gap:24px;padding:22px 0;border-bottom:1px solid var(--hair)}
.top a{text-decoration:none}
.top .who{margin-left:auto;display:flex;align-items:center;gap:22px}
.btn{font:600 14px/1 'IBM Plex Mono',monospace;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;
  padding:12px 18px;border:1px solid var(--rule);background:#FFFFFF;color:var(--ink);text-decoration:none;display:inline-block;white-space:nowrap}
.btn.solid{background:var(--rule);color:#FFFFFF}
.btn:hover{box-shadow:0 0 0 2px var(--rule)}

header.lead{padding:72px 0 36px;display:flex;flex-direction:column;align-items:center;gap:22px;text-align:center}
h1{margin:0;font-family:'Figtree',sans-serif;font-weight:500;font-size:clamp(28px,3.6vw,50px);line-height:1.08;letter-spacing:.08em;text-transform:uppercase;color:var(--ink)}
.intro{margin:0;max-width:70ch;text-align:left;text-wrap:pretty}
.key{max-width:70ch;margin:0 auto;padding:0 0 56px;display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.key svg{flex:none;color:var(--brown)}

/* rows: label column on the left, content on the right, dark rule above each */
.row{display:grid;grid-template-columns:270px 1fr;border-top:1px solid var(--rule)}
.row:last-of-type{border-bottom:1px solid var(--hair)}
.label{padding:26px 24px 30px 0;display:flex;flex-direction:column;gap:8px}
.cell{padding:12px 28px;border-left:1px solid var(--hair)}
.cell.ours{background:var(--ours)}
.cell.paid{background:var(--paid)}
.items{list-style:none;margin:0;padding:0}
.items li+li{border-top:1px solid var(--hair)}
.items a{display:grid;grid-template-columns:1fr auto 120px;gap:20px;align-items:center;padding:16px 0;text-decoration:none}
.items .iname{font-size:17px;line-height:1.3;font-weight:500;color:var(--ink);display:block}
.items a:hover .iname{text-decoration:underline;text-underline-offset:4px}
.items .date{text-align:right;white-space:nowrap;font-size:16px;color:var(--soft)}
.tag{font:600 14px/1 'IBM Plex Mono',monospace;letter-spacing:.14em;text-transform:uppercase;padding:6px 10px;white-space:nowrap}
.tag.new{background:var(--brown);color:#FFFFFF}
.tag.upd{border:1px solid var(--brown);color:var(--brown);background:#FFFFFF}
.section-gap{height:72px}
.sub{padding:0 0 18px}

footer{display:flex;gap:28px;padding:28px 0 0;margin-top:56px}
footer span:last-child{margin-left:auto}

/* entry page */
.crumbs{padding:22px 0}
.crumbs a{text-underline-offset:4px}
.acts{display:flex;gap:12px;justify-content:center}
.meta{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--rule);border-bottom:1px solid var(--hair)}
.meta div{padding:24px 28px 28px;border-left:1px solid var(--hair);display:flex;flex-direction:column;gap:8px}
.meta div:first-child{border-left:0;padding-left:0}
.meta .v{font-size:17px;font-weight:500;color:var(--ink)}
.stage{margin-top:56px;box-shadow:inset 0 0 0 1px var(--hair);background:var(--paid);min-height:480px;display:grid;place-items:center;text-align:center;padding:32px}

dialog{border:1px solid var(--rule);padding:0;width:min(600px,92vw);color:var(--body);background:#FFFFFF}
dialog::backdrop{background:rgba(20,23,26,.6)}
dialog .dh{display:flex;align-items:center;padding:22px 28px;border-bottom:1px solid var(--rule)}
dialog .dh .caps{margin-right:auto}
dialog .db{padding:6px 28px 28px}
.log{list-style:none;margin:0;padding:0}
.log li{padding:18px 0}
.log li+li{border-top:1px solid var(--hair)}
.log p{margin:6px 0 0}
.log b{font-weight:600;color:var(--ink)}
textarea,input[type=email]{width:100%;font:inherit;padding:13px 14px;border:1px solid var(--rule);color:var(--ink);background:#FFFFFF}
textarea{min-height:130px;margin:10px 0 14px}
label{display:block;margin:0 0 8px}

/* sign-in */
.signin{min-height:92vh;display:grid;place-items:center;padding:32px}
.signin .box{width:min(520px,100%);display:flex;flex-direction:column;gap:22px;text-align:center}
.signin h1{font-size:34px}
.signin form{text-align:left;border-top:1px solid var(--rule);padding-top:26px;margin-top:6px}
.signin .btn{width:100%;text-align:center;margin-top:16px;padding:16px}
.signin .lock{display:flex;gap:12px;text-align:left;background:var(--ours);padding:18px 20px}
.signin .lock svg{flex:none;margin-top:4px;color:var(--brown)}

.trial{background:#FFF3C4;color:var(--ink);text-align:center;padding:9px 16px;font-size:15px;font-weight:600}

/* planned sections: plain text, not a link, same legible colours */
.items .planned{display:grid;grid-template-columns:1fr auto 120px;gap:20px;align-items:center;padding:13px 0}
.items .planned .iname{font-weight:400;color:var(--body)}
.items .mono.date{font-size:14px}

/* brand header bar */
.bar{background:#121224}
.bar-in{max-width:1240px;margin:0 auto;padding:14px 40px;display:flex;align-items:center;gap:26px}
.bar img{height:60px;width:auto;display:block}
.bar .mono{color:#FFFFFF}
.bar .lib{padding-left:26px;border-left:1px solid #5A5A72}
.bar .who{margin-left:auto;display:flex;align-items:center;gap:22px}
.bar .btn{background:transparent;color:#FFFFFF;border-color:#FFFFFF}
.bar .btn:hover{box-shadow:0 0 0 2px #FFFFFF}
.bar a:focus-visible{outline-color:#FFD34D}

/* section page: items carry a type label */
.items.typed a{grid-template-columns:1fr 110px 110px 120px}
.items .type{font:500 14px/1 'IBM Plex Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--soft)}
.back{margin-top:40px}
.items.typed .tag{justify-self:start}

/* report page: title, summary, key takeaways, full text, fine lines between */
.rrow{display:grid;grid-template-columns:270px minmax(0,70ch);gap:0 28px;border-top:1px solid #AEB7BE;padding:40px 0 48px}
.rrow:last-of-type{border-bottom:1px solid #AEB7BE}
.rrow .rl{display:flex;flex-direction:column;gap:8px}
.summary{margin:0;font-size:19px;line-height:1.6;color:var(--ink);text-wrap:pretty}
.takeaways{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:14px}
.takeaways li{position:relative;padding-left:26px;color:var(--ink)}
.takeaways li::before{content:"";position:absolute;left:0;top:.62em;width:9px;height:9px;background:var(--brown)}
.fulltext>*:first-child{margin-top:0}
.fulltext p{margin:0 0 18px;text-wrap:pretty}
.fulltext h3{font-family:'Figtree',sans-serif;font-weight:700;font-size:17px;letter-spacing:.035em;text-transform:uppercase;color:var(--ink);margin:40px 0 12px}
.fulltext strong{font-weight:600;color:var(--ink)}
.fulltext ul{margin:0 0 18px;padding-left:22px}
.fulltext li{margin-bottom:8px}

/* charts: proportion bars. Colours checked with the dataviz validator (light surface):
   blue #3A7DB5 = present / platform code, ochre #C99A1C = product name, rust #B9501C = missing. Rust always means missing. */
.takeaways li.has-fig{padding-bottom:6px}
.fig{margin:18px 0 10px;padding:22px 24px 18px;background:var(--paid);box-shadow:inset 0 0 0 1px var(--hair)}
.fig .ft{font-family:'Figtree',sans-serif;font-weight:700;font-size:15px;letter-spacing:.035em;text-transform:uppercase;color:var(--ink);margin:0 0 16px}
.brow{display:grid;grid-template-columns:70px 1fr 190px;gap:16px;align-items:center;margin:0 0 12px}
.brow.nolabel{grid-template-columns:1fr 190px}
.brow .bl{font-size:16px;font-weight:500;color:var(--ink)}
.brow .bv{font-size:16px;color:var(--ink);white-space:nowrap}
.bar-track{display:flex;gap:2px;height:22px}
.seg{height:100%;min-width:6px;position:relative}
.seg:first-child{border-radius:4px 0 0 4px}.seg:last-child{border-radius:0 4px 4px 0}
.seg.blue{background:#3A7DB5}.seg.ochre{background:#C99A1C}.seg.rust{background:#B9501C}
.seg:hover::after,.seg:focus::after{content:attr(data-tip);position:absolute;left:50%;bottom:calc(100% + 8px);transform:translateX(-50%);
  background:var(--ink);color:#FFFFFF;font-size:15px;line-height:1.3;padding:8px 12px;white-space:nowrap;z-index:5}
.seg:last-child:hover::after,.seg:last-child:focus::after{left:auto;right:0;transform:none}
.legend{display:flex;flex-wrap:wrap;gap:6px 22px;margin:14px 0 0;padding:0;list-style:none;font-size:15px;color:var(--body)}
.legend li{padding:0;display:flex;align-items:center;gap:8px}
.legend li::before{position:static;width:14px;height:14px;border-radius:2px;flex:none}
.legend .k-blue::before{background:#3A7DB5}.legend .k-ochre::before{background:#C99A1C}.legend .k-rust::before{background:#B9501C}
.fig details{margin-top:12px;font-size:15px}
.fig summary{cursor:pointer;color:var(--ink);font-weight:500}
.fig table{border-collapse:collapse;margin-top:10px;font-size:15px}
.fig th,.fig td{text-align:left;padding:6px 18px 6px 0;border-bottom:1px solid var(--hair);font-weight:400}
.fig th{font-weight:600;color:var(--ink)}

/* live sign-in additions */
.bar form{margin:0}
.bar button.btn{font:600 14px/1 'IBM Plex Mono',monospace}
.signin input{width:100%;font:inherit;padding:13px 14px;border:1px solid var(--rule);color:var(--ink);background:#FFFFFF}
.signin input[name=code]{font:600 26px/1 'IBM Plex Mono',monospace;letter-spacing:.3em;text-align:center}
.signin button.btn{width:100%;margin-top:16px;padding:16px;font:600 14px/1 'IBM Plex Mono',monospace}
.notice{margin:0;padding:14px 18px;background:#FFF3C4;color:var(--ink);text-align:left;font-weight:500}
.linklike{font:inherit;color:var(--ink);background:none;border:0;padding:0;text-decoration:underline;text-underline-offset:3px;cursor:pointer}

/* sign-in pages: title on one line, supporting text centred */
.signin .box{width:min(760px,100%);align-items:center}
.signin h1{white-space:nowrap;font-size:clamp(16px,3.6vw,28px)}
.signin form{width:min(520px,100%)}
.signin form .note,.signin form p{text-align:center}
.signin .notice{width:min(520px,100%);text-align:center}

/* password sign-in and account page */
.signin button.btn:not(.solid){margin-top:10px}
.bar a.mono{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
.notice.good{background:#DDF1E4}

/* drafts, releasing, and live comments */
.tag.draft{background:#1D2126;color:#FFFFFF}
.draftbox{margin:28px 0 0;padding:26px 28px 28px;background:#FFF3C4;box-shadow:inset 0 0 0 1px #1D2126;display:flex;flex-direction:column;gap:10px}
.draftbox label{margin:10px 0 0}
.draftbox textarea{min-height:0;margin:0}
.draftbox .btn{align-self:flex-start;margin-top:12px}
.wrap>.notice{margin-top:24px}
dialog form{margin-top:18px;border-top:1px solid var(--rule);padding-top:18px}
dialog{max-height:86vh;overflow:auto}
.fulltext.whole{max-width:70ch;margin:0 auto;padding:40px 0;border-top:1px solid #AEB7BE}