/* hotfix 1 Oct (Claude, Dan's yes): phone fits for /tests filters */
.filterbar{grid-template-columns:minmax(0,1fr)}
.filterbar>*{min-width:0;max-width:100%}
.searchrow input{min-width:0}
.cx-more-wrap{display:flex;justify-content:center;margin:18px 0 6px}
.filterrow>*{max-width:100%;min-width:0;box-sizing:border-box}
@media(max-width:620px){.fchips{max-width:calc(100% + 28px)}}
/* hotfix 1 Oct (Dan): match dutified.com. Plus Jakarta Sans everywhere, the orange logo, orange actions.
   The names the CSS already uses are pointed at Plus Jakarta Sans, so every page changes in one place.
   NOTE 74b/74c (design lock, 2 Oct): --mono and --px-mono added to the same trick, so every label that was set in
   IBM Plex Mono (step numbers, kickers, tags) reads in Plus Jakarta Sans too; the accent hex moved to tokens.css's
   orange (#d4521f / #b54318), the one dutified.com uses, replacing the older #d4521f. */
@font-face{font-family:"Plus Jakarta Sans";src:url("/static/fonts/PlusJakartaSans.ttf") format("truetype");font-weight:200 800;font-display:swap}
@font-face{font-family:"Newsreader";src:url("/static/fonts/PlusJakartaSans.ttf") format("truetype");font-weight:200 800;font-display:swap}
@font-face{font-family:"Libre Franklin";src:url("/static/fonts/PlusJakartaSans.ttf") format("truetype");font-weight:100 900;font-display:swap}
html:root{--sans:"Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;--display:var(--sans);--mono:var(--sans);
  --px-sans:var(--sans);--px-display:var(--sans);--px-mono:var(--sans);
  --accent:#d4521f;--accent-dark:#b54318;--accentbg:#fff3ec;--orange:#d4521f;--orange-dark:#b54318;--orange-soft:#fff3ec;
  --px-accent:#d4521f;--px-accentbg:#fff3ec}
body{font-family:var(--sans)}
h1,h2,h3,.logo{letter-spacing:-.02em}
h1,h2{font-weight:800}
.logo{font-family:var(--sans)!important;font-weight:800!important}
.logo i{background:#d4521f!important;border-radius:9px}
.logo i:after{content:"";width:10px;height:10px;border:3px solid #fff;border-radius:50%;background:none}
/* hotfix 1 Oct: Run a test card spilled 55px off a phone (the file box set the column width) */
@media(max-width:620px){.cx-card.r2-part{grid-template-columns:minmax(0,1fr)}.cx-card.r2-part>*{min-width:0;max-width:100%}
 .r2-part input[type=file]{max-width:100%;min-width:0}}
/* hotfix 1 Oct (Dan): customer dots were blue next to purple, hard to tell apart. Colour-blind-safe (Okabe-Ito)
   colours that also differ in lightness, plus a different shape for each group, so colour is never the only cue. */
html body .cx-picdots i.a,html body .cx-piclegend i.a{background:#0072b2;border-radius:50%}
html body .cx-picdots i.b,html body .cx-piclegend i.b{background:#e69f00;border-radius:2px}
html body .cx-picdots i.c,html body .cx-piclegend i.c{background:transparent;border-radius:50%;box-shadow:inset 0 0 0 2px #6b7685}
html body .ns-hero .cx-picdots i.a,html body .ns-hero .cx-piclegend i.a{background:#56b4e9}
html body .ns-hero .cx-picdots i.c,html body .ns-hero .cx-piclegend i.c{box-shadow:inset 0 0 0 2px #c9d1dc}
html body .wz-dots i.g0,html body .wz-legend-list .k.g0{background:#0072b2}
html body .wz-dots i.g1,html body .wz-legend-list .k.g1{background:#e69f00}
html body .wz-dots i.g2,html body .wz-legend-list .k.g2{background:#009e73}
html body .wz-dots i.g3,html body .wz-legend-list .k.g3{background:#cc79a7}
html body .wz-dots i.g4,html body .wz-legend-list .k.g4{background:#56b4e9}
html body .cf-dots i.v{background:#e69f00;border-radius:2px}
/* hotfix 1 Oct (Dan): the tour was still blue and typewriter-style; brand colours and font, bigger and calmer */
html body .tourbar{background:#0b1636!important;color:#fff}
html body .tipcard .btn{background:#d4521f;border-color:#d4521f;color:#fff}
html body .tipcard .btn:hover{background:#b54318;border-color:#b54318}
html body .tipcard .btn.quiet,html body .tipcard .btn.line{background:#fff;color:#0b1636;border-color:#c9d1dc}
html body .tip-dots i.on{background:#d4521f}
html body .tip-skip{color:#d4521f}
html body .tipcard:focus-visible,html body .tip-more:focus-visible{outline-color:#d4521f}
html body .tipcard *{font-family:var(--sans)!important;letter-spacing:normal}
html body .tipcard h2,html body .tipcard h3{font-weight:800;letter-spacing:-.02em}
html body .tipcard p{font-size:17px;line-height:1.5}
html body .spot{box-shadow:0 0 0 4px #d4521f,0 0 0 9999px rgba(11,22,54,.55)}
/* hotfix 1 Oct (Dan): the three groups explained in plain words, one per line, before the test */
html body .cx-piclegend-rows{display:grid;gap:8px;margin-top:12px}
html body .cx-piclegend-rows span{display:grid;grid-template-columns:16px 1fr;column-gap:8px;align-items:start}
html body .cx-piclegend-rows i{margin:4px 0 0}
html body .cx-piclegend-rows small{grid-column:2;color:var(--mute,#5b6577);font-size:14px}
html body .r2-part .cx-picture{margin:8px 0 4px}
html body .rp-other{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
html body .imp-go .btn,html body .rp-other .btn{min-width:200px;justify-content:center}
/* the customer picture works on every page, not only those that load proto.css (the confirm page) */
html body .cx-picture{margin:8px 0 4px}
html body .cx-picdots{display:grid;grid-template-columns:repeat(25,1fr);gap:4px;max-width:420px}
html body .cx-picdots i,html body .cx-piclegend i{display:inline-block;aspect-ratio:1}
html body .cx-piclegend i{width:11px;height:11px}