/* Page kit: the look of user-journey.html, stepper-variants.html and activity-log-variants.html in one file.
   No build, no dependencies. Link it from a page next to it: <link rel="stylesheet" href="page.css">
   Rules: 16px for everything you read, 14px for what is secondary. Weights 450 and 500 only.
   Grey surfaces (milk) hold pictures and cards. Lines (line) separate rows. Colour only for status. */

:root{
  /* colour */
  --white:#fff; --black:#000;
  --milk:#FAFAFA; --cream:#F2F2F2; --line:#E6E6E6;
  --n300:#CCCCCC; --n400:#B3B3B3; --n500:#8C8C8C;
  --silver:#767676; --gray:#666; --dgray:#4D4D4D;
  --ok:#007A40; --ok-bg:#E6F3ED;
  --part:#8A5D00; --part-bg:#FFF4D1; --part-line:#E0A100;
  --no:#AE2136; --no-bg:#FBEBED;
  --info:#026DBD; --info-bg:#E6F2FB;

  /* type */
  --sans:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  --t-h1:450 32px/40px var(--sans);   --ls-h1:-.5px;
  --t-h2:450 24px/32px var(--sans);
  --t-h3:450 18px/24px var(--sans);
  --t-h5:450 16px/24px var(--sans);
  --t-p1:450 16px/24px var(--sans);
  --t-p2:450 14px/20px var(--sans);
  --t-cap:450 14px/20px var(--sans);   /* with letter-spacing:1px and uppercase */
  --t-label:450 12px/16px var(--sans); /* small uppercase labels, with letter-spacing:1px */

  /* shape */
  --r-md:8px; --r-xl:12px; --r-2xl:16px;
  --shadow:0 4px 16px rgba(0,0,0,.08),0 1px 2px rgba(0,0,0,.04);
  --toc-w:240px;
}

/* ================= The page ================= */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;padding:0;max-width:none;font:var(--t-p1);color:var(--black);background:var(--white);-webkit-font-smoothing:antialiased}
button,input,select{font:inherit}
b,strong{font-weight:500}
a{color:inherit;text-underline-offset:3px}
main{max-width:1120px;margin:0 auto;padding:96px 48px 160px}
main>section{margin-top:120px;scroll-margin-top:24px}
main>section:first-child{margin-top:0}
@media (max-width:700px){ main{padding:48px 20px 80px} }

h1{font:var(--t-h1);letter-spacing:var(--ls-h1);margin:0;max-width:820px}
h2{font:var(--t-h2);margin:0;max-width:760px}
h3{font:var(--t-h3);margin:0}
h4,h5{font:var(--t-h5);margin:0}
p{margin:8px 0 0;max-width:760px}
.lede{margin-top:16px;max-width:820px}          /* the line under the h1, in black */
.sub{color:var(--gray);margin-top:8px}          /* the line under an h2, in grey */
.sub+.sub{margin-top:4px}
.small{font:var(--t-p2);color:var(--silver)}
.cap{font:var(--t-cap);color:var(--silver);letter-spacing:1px;text-transform:uppercase}
[hidden]{display:none!important}
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ================= Table of contents =================
   Fixed at the left, centred top to bottom. Each section is a short line and its name; the one you are
   reading has the longer, black line. A page with a .toc moves right to make room for it. */
body:has(.toc){padding-left:var(--toc-w)}
.toc{position:fixed;left:32px;top:50%;transform:translateY(-50%);z-index:400;width:calc(var(--toc-w) - 64px)}
.toc ol{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.toc li a{font:var(--t-p2);display:flex;align-items:center;gap:12px;padding:4px 0;color:var(--silver);text-decoration:none;transition:color .2s}
.toc li a::before{content:"";flex:0 0 auto;width:12px;height:1px;background:var(--n300);transition:width .2s,background .2s}
.toc li a:hover{color:var(--black)}
.toc li a:hover::before{background:var(--n500)}
.toc li a.on{color:var(--black)}
.toc li a.on::before{width:24px;background:var(--black)}
.toc li a:focus-visible{outline:2px solid var(--black);outline-offset:2px;border-radius:2px}
@media (max-width:900px){ .toc{display:none} body:has(.toc){padding-left:0} }

/* ================= Cards: a grid of grey boxes (the four questions, how the proposal answers them) ================= */
.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:48px 0 0;padding:0;list-style:none}
.cards.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.cards>*{background:var(--milk);border-radius:var(--r-xl);padding:24px}
.cards h3{margin:0 0 4px}
.cards p{margin:0;color:var(--gray)}
.cards .pic{display:flex;align-items:center;justify-content:center;min-height:80px;margin-bottom:12px}
@media (max-width:800px){ .cards,.cards.three{grid-template-columns:1fr} }

/* ================= Story: what we tried, step by step, each with its picture under it ================= */
.story{margin-top:40px}
.story-row{display:grid;gap:16px;padding:40px 0}
.story-row>div:first-child{max-width:760px}
.story-row .cap{margin-bottom:4px}
.story-row h3{margin:0 0 4px}
.story-row p{color:var(--gray);margin:0}
.story-end{color:var(--gray);margin-top:32px}
.story-end a{color:var(--black)}

/* ================= Pictures: a grey stage for a live preview, a white frame for a page in miniature ================= */
.canvas{background:var(--milk);border-radius:var(--r-xl);padding:28px;display:flex;justify-content:center}
.frame{width:100%;background:var(--white);border:1px solid var(--line);border-radius:var(--r-xl);overflow:hidden}
.panel{width:420px;max-width:100%;background:var(--white);border:1px solid var(--line);border-radius:var(--r-xl);box-shadow:var(--shadow);overflow:hidden}
/* a stand-in for something not drawn yet: grey bars */
.sk{display:block;height:8px;border-radius:100px;background:var(--cream);margin:8px 0}
/* where a screen is missing */
.missing{display:flex;align-items:center;justify-content:center;min-height:120px;padding:24px;border:1.5px dashed var(--n300);border-radius:var(--r-xl);color:var(--silver);font:var(--t-p2);text-align:center}

/* ================= Two columns side by side (how it works: closed and open) ================= */
.cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:40px;align-items:start}
.cols h3{margin:0 0 16px}
@media (max-width:800px){ .cols{grid-template-columns:1fr} }

/* ================= The catalogue: one plain list, a row per variant =================
   Left: a number hanging in the gutter, the name, a plus and a minus. Right: the preview. */
.x-bar{position:sticky;top:0;z-index:300;margin:32px 0 0;padding:8px 0;background:var(--white);display:flex;align-items:center;flex-wrap:wrap;gap:8px}
.x-area{font:var(--t-h3);display:flex;align-items:baseline;gap:8px;margin:72px 0 0}
.x-area:first-of-type{margin-top:40px}
.x-group{font:var(--t-h5);display:flex;align-items:baseline;gap:8px;margin:48px 0 0;padding-bottom:12px;border-bottom:1px solid var(--line);scroll-margin-top:72px}
.x-area+.x-group{margin-top:20px}
.x-area span,.x-group span{color:var(--silver)}
.x-list{margin-top:40px;border-top:1px solid var(--line)}
.x-group+.x-list{margin-top:0;border-top:0}
.x-row{display:grid;grid-template-columns:280px minmax(0,1fr);gap:36px;align-items:start;padding:28px 0;border-bottom:1px solid var(--line);scroll-margin-top:72px}
.x-meta{padding-left:36px}
.x-meta h5{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 8px}
.x-meta .n{font:var(--t-cap);color:var(--silver);font-variant-numeric:tabular-nums;width:32px;margin-left:-36px;letter-spacing:1px;text-transform:uppercase}
.tag{font:var(--t-cap);padding:0 8px;border-radius:100px;color:var(--ok);background:var(--ok-bg);letter-spacing:1px;text-transform:uppercase}
.tag.prop{color:var(--white);background:var(--info)}
.x-row.is-prop .n{color:var(--info)}
.x-row.is-prop .canvas{box-shadow:inset 0 0 0 1.5px var(--info)}
.pm{display:grid;gap:4px;margin-top:8px;color:var(--gray)}
.pm span{padding-left:16px;text-indent:-16px}
.pm span::before{display:inline-block;width:16px;text-indent:0}
.pm .p::before{content:"+";color:var(--ok)}
.pm .m::before{content:"−";color:var(--no)}
.x-prev{min-width:0}
@media (max-width:1050px){ .x-row{grid-template-columns:1fr;gap:16px} }

/* filter chips, for the sticky bar or inside a preview */
.chip{font:var(--t-p1);display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 12px;border-radius:100px;border:1px solid var(--line);background:var(--white);color:var(--dgray);cursor:pointer}
.chip span{color:var(--silver);font-variant-numeric:tabular-nums}
.chip:hover{border-color:var(--n400)}
.chip[aria-pressed="true"]{background:var(--black);border-color:var(--black);color:var(--white)}
.chip[aria-pressed="true"] span{color:rgba(255,255,255,.7)}
.chip:focus-visible{outline:2px solid var(--black);outline-offset:2px}

/* ================= Journey review: status, stages, Today / Target / Prototype, requirements ================= */
/* status as a pill */
.s{display:inline-block;font:var(--t-cap);line-height:24px;padding:0 8px;border-radius:100px;white-space:nowrap}
.s.ok{color:var(--ok);background:var(--ok-bg)}
.s.part{color:var(--part);background:var(--part-bg)}
.s.no{color:var(--silver);background:var(--cream)}
/* status as a round mark: a green check, or an empty grey ring */
.ck{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border:1.5px solid;border-radius:50%;vertical-align:-4px}
.ck svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.ck.ok{border-color:var(--ok);background:var(--ok-bg);color:var(--ok)}
.ck.part{border-color:var(--part-line);background:var(--part-bg);color:var(--part)}
.ck.n{border-color:#BFBFBF;background:var(--white)}
/* the legend under a heading */
.legend{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:20px;font:var(--t-p2);color:var(--gray)}
.legend span{display:flex;align-items:center;gap:8px}

/* a stage */
.stage>header{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.stage>header .n{font:var(--t-h2);color:var(--silver)}
.goal{color:var(--gray);margin-top:4px}
/* Today, Target, Prototype side by side; the colour on top tells them apart */
.cmp{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:24px}
.cmp>div{background:var(--milk);border-radius:var(--r-xl);padding:16px 20px;border-top:3px solid}
.cmp .today{border-color:var(--no)} .cmp .target{border-color:var(--ok)} .cmp .proto{border-color:var(--black)}
.cmp .lbl{font:var(--t-p2);color:var(--silver)}
.cmp .feel{font:var(--t-h3);margin-top:4px}
.cmp p{font:var(--t-p2);color:var(--gray);margin-top:8px}
@media (max-width:800px){ .cmp{grid-template-columns:1fr} }
/* requirements: status, what is asked, what the prototype does, its screens */
.reqs{margin-top:32px;border-top:1px solid var(--line)}
.r{display:grid;grid-template-columns:104px minmax(0,1fr) minmax(0,1.25fr) 72px;gap:16px;padding:12px 0;border-bottom:1px solid var(--line)}
.r .a{color:var(--gray)}
.r .f{font:var(--t-p2);text-align:right}
.r .f a{color:var(--silver);text-decoration:none;border-bottom:1px solid var(--line)}
.r .f a:hover{color:var(--black)}
@media (max-width:800px){ .r{grid-template-columns:1fr} .r .f{text-align:left} }

/* a flow map wider than the text column, centred on the window, scrolling sideways when it doesn't fit */
.wide{margin:24px 0 0;width:min(1360px,calc(100vw - var(--toc-w) - 48px));position:relative;left:50%;transform:translateX(-50%);overflow-x:auto}
body:not(:has(.toc)) .wide{width:min(1360px,calc(100vw - 48px))}
@media (max-width:900px){ .wide{width:calc(100vw - 48px)} }
svg.board{display:block;width:100%;min-width:900px;height:auto;font-family:var(--sans)}
svg.board text{fill:var(--black);font-size:12px}
svg.board .lane{fill:var(--silver);font-size:12px;letter-spacing:1px}
svg.board path.arrow{fill:none;stroke:var(--n500);stroke-width:1.5}
svg.board .bx rect{fill:var(--white);stroke-width:1.5}
svg.board .bx.ok rect{stroke:var(--ok)}
svg.board .bx.part rect{stroke:var(--part-line)}
svg.board .bx.n rect{stroke:#BFBFBF}
svg.board .bx.n text{fill:var(--silver)}
svg.board a:hover .bx rect{stroke-width:2.5}

/* ================= Screens: hidden in the page, a figure number opens one in the lightbox ================= */
.screens{display:none}
figure{margin:0}
figcaption{font:var(--t-p2);color:var(--silver);margin-top:8px}
figcaption b{color:var(--black);font-weight:450;margin-right:8px}
.shot{display:block;max-width:100%;height:auto;border:1px solid var(--line);border-radius:var(--r-xl)}
.lb{border:0;padding:64px 24px 24px;margin:0;width:100vw;height:100vh;max-width:none;max-height:none;background:transparent;overflow:hidden}
.lb[open]{display:flex;align-items:center;justify-content:center}
.lb::backdrop{background:rgba(0,0,0,.7)}
.lb-panel{background:var(--white);border-radius:var(--r-2xl);padding:24px;max-width:min(1400px,100%);max-height:100%;overflow:auto;overscroll-behavior:contain}
.lb-panel img{display:block;max-width:100%;height:auto;border:1px solid var(--line);border-radius:var(--r-xl)}
.lb-close{position:fixed;top:16px;right:16px;display:flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.14);color:var(--white);cursor:pointer}
.lb-close svg{width:16px;height:16px;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.lb-close:hover{background:rgba(255,255,255,.26)}
.lb-close:focus-visible{outline:2px solid var(--white);outline-offset:2px}
html.lb-on,html.lb-on body{overflow:hidden}