/* ============================================================================
Shared sheet for the signed-in pages: sign in, sign up, onboarding, brief,
dashboard, questions, sessions.
An observatory log, not a launch page. The tool measures whether a brand
shows up in the dark of an AI answer, so the sheet is built on that: a
night-sky navy band across the top for the field a brand is measured in,
an amber signal for what stands out in it, and off-white paper to read on.
Three working colours each mean one thing: navy is anything that is
yours, green a recommendation, amber a mention or a caution, coral a loss
or a fault. Nothing is coloured for
decoration, so colour on a page is always a finding.
Type: Fraunces for titles and the big figures -- a serif with some
character in the italic -- IBM Plex Sans for everything read at speed, and
IBM Plex Mono for labels and counts. Rules divide things; no gradients,
shadows or glass.
Token names are kept from the first sheet so every page still resolves.
Dark is its own set of steps on the same ideas, not an inversion.
========================================================================== */
/* The fonts are linked from each page's rather than imported here:
an @import is a second round trip that cannot begin until this file has
arrived and been parsed, and a beside this one begins at once. */
:root{
color-scheme:light;
--paper:#F5F4EF; --card:#FFFFFF; --card-2:#F2F1EB; --card-3:#E8E6DE;
--ink:#14192A; --ink-1:#14192A; --ink-2:#3B4252; --ink-3:#676E7E; --ink-4:#979CA9;
--line:#DDDBD2; --line-2:#C5C2B6;
--brand:#1F3D66; --brand-ink:#172F50; --brand-tint:#E3E9F2;
--ok:#1E7A5F; --ok-tint:#DFF0EA;
--wr:#C98A1B; --wr-ink:#8F5F0A; --wr-tint:#FBEFD4;
--er:#C64A2E; --er-ink:#A0381F; --er-tint:#F9E3DC;
--onsolid:#F5F4EF; --on-brand:#F5F4EF;
--band:#14243B; --band-ink:#F5F4EF; --band-line:rgba(245,244,239,.4);
--r1:3px; --r2:5px; --r3:8px;
--sh1:none;
--sh2:0 14px 34px -20px rgba(20,25,42,.45);
--ring:0 0 0 3px rgba(31,61,102,.2);
--ring-er:0 0 0 3px rgba(198,74,46,.18);
--serif:"Fraunces","Iowan Old Style","Palatino Linotype",Georgia,serif;
--disp:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
--mono:"IBM Plex Mono",ui-monospace,"Cascadia Mono",Menlo,Consolas,monospace;
}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){
color-scheme:dark;
--paper:#101521; --card:#161C2A; --card-2:#1B2231; --card-3:#232B3C;
--ink:#ECEDF0; --ink-1:#ECEDF0; --ink-2:#C9CCD4; --ink-3:#9AA0AD; --ink-4:#6C7383;
--line:#27303F; --line-2:#38425A;
--brand:#3B6BAA; --brand-ink:#9CBDEB; --brand-tint:#1B2A44;
--ok:#6FCBA9; --ok-tint:#173028;
--wr:#E3AC4C; --wr-ink:#EDBE6C; --wr-tint:#33270F;
--er:#EA8B6E; --er-ink:#F2A188; --er-tint:#3A1F18;
--onsolid:#101521; --on-brand:#F5F4EF;
--band:#1E3358; --band-ink:#ECEDF0; --band-line:rgba(236,237,240,.4);
--sh2:0 14px 34px -20px rgba(0,0,0,.8);
--ring:0 0 0 3px rgba(143,180,232,.24);
--ring-er:0 0 0 3px rgba(234,139,110,.2);
}}
:root[data-theme=dark]{
color-scheme:dark;
--paper:#101521; --card:#161C2A; --card-2:#1B2231; --card-3:#232B3C;
--ink:#ECEDF0; --ink-1:#ECEDF0; --ink-2:#C9CCD4; --ink-3:#9AA0AD; --ink-4:#6C7383;
--line:#27303F; --line-2:#38425A;
--brand:#3B6BAA; --brand-ink:#9CBDEB; --brand-tint:#1B2A44;
--ok:#6FCBA9; --ok-tint:#173028;
--wr:#E3AC4C; --wr-ink:#EDBE6C; --wr-tint:#33270F;
--er:#EA8B6E; --er-ink:#F2A188; --er-tint:#3A1F18;
--onsolid:#101521; --on-brand:#F5F4EF;
--band:#1E3358; --band-ink:#ECEDF0; --band-line:rgba(236,237,240,.4);
--sh2:0 14px 34px -20px rgba(0,0,0,.8);
--ring:0 0 0 3px rgba(143,180,232,.24);
--ring-er:0 0 0 3px rgba(234,139,110,.2);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
/* Nothing scrolls sideways at the page level. The background glow on the
public pages is sized to the viewport, which counts the vertical scroll bar,
and without this the page is a few pixels wider than the window. clip, not
hidden, so sticky elements keep working. */
html,body{overflow-x:clip}
body{margin:0;background:var(--paper);color:var(--ink);font:15px/1.55 var(--disp);
-webkit-font-smoothing:antialiased;font-feature-settings:"kern","liga"}
a{color:var(--brand-ink)}
.wrap{width:100%;max-width:860px;margin:0 auto;padding:0 clamp(20px,4vw,40px)}
.narrow{max-width:440px}
.top{padding:44px 0 8px}
.back{display:inline-block;margin:0 0 14px;font-size:13px;text-decoration:none}
.back:hover{color:var(--ink)}
h1{margin:0 0 8px;font:500 clamp(26px,3.6vw,36px)/1.1 var(--serif);font-variation-settings:"opsz" 96;
letter-spacing:-.015em;color:var(--ink)}
h2{margin:0;font:500 17px/1.3 var(--serif);font-variation-settings:"opsz" 24;color:var(--ink)}
.lede{margin:0;max-width:66ch;color:var(--ink-2)}
em{font-style:italic}
/* --- waiting for the account --------------------------------------------
A cover while the page asks the server what it needs. It says what it is
doing: a ring with an amber arc turning on a navy track, the page's own
line in the serif, and under it a smaller line that nav.js changes every
second or so -- "reading the panel", "counting the sessions" -- so a slow
connection reads as work being done rather than as a page that hung. */
.booting{position:fixed;inset:0;z-index:200;display:flex;flex-direction:column;
align-items:center;justify-content:center;gap:18px;
background:var(--paper);color:var(--ink-2);font:italic 500 17px/1.3 var(--serif);
font-variation-settings:"opsz" 24}
.booting[hidden]{display:none}
.spin{width:44px;height:44px;border-radius:50%;border:3px solid var(--brand-tint);
border-top-color:var(--wr);border-right-color:var(--brand);animation:spin .9s cubic-bezier(.55,.15,.45,.85) infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){ .spin{animation-duration:2.4s} }
.booting .bstep{font:500 11.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-4);
margin:-6px 0 0;min-height:1em;animation:bstep .9s ease}
@keyframes bstep{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}
/* --- the top bar ---------------------------------------------------------
A navy band across the whole width, bled out beyond the column with a
clip so it never causes a sideways scroll. The wordmark and the pages sit
in cream on it; the page you are on carries an amber rule. */
.nav{position:sticky;top:0;z-index:60;display:flex;align-items:center;gap:6px 14px;
--navw:min(1080px,calc(100vw - 2 * clamp(20px,4vw,40px)));width:var(--navw);margin-left:calc(50% - var(--navw) / 2);
min-height:56px;padding:8px 0;color:var(--band-ink);
background:var(--band);box-shadow:0 0 0 100vmax var(--band);clip-path:inset(0 -100vmax);
border-bottom:1px solid rgba(255,255,255,.14)}
.ws{display:flex;align-items:center;gap:10px;font:600 20px/1 var(--serif);font-variation-settings:"opsz" 24;
letter-spacing:-.01em;color:var(--band-ink)}
/* The mark: a point, and the sound of it carrying. A dot for the brand and
two arcs for being heard, drawn in the current colour so it is cream on
the band and navy anywhere else. Painted through a mask so one SVG serves
every size and both themes. */
.ws i,.mark i{display:inline-block;flex:none;width:24px;height:24px;align-self:center;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='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='7' cy='12' r='3.2' fill='%23000' stroke='none'/%3E%3Cpath d='M12.6 7.6a6.2 6.2 0 0 1 0 8.8'/%3E%3Cpath d='M16.4 4.2a11 11 0 0 1 0 15.6'/%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='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='7' cy='12' r='3.2' fill='%23000' stroke='none'/%3E%3Cpath d='M12.6 7.6a6.2 6.2 0 0 1 0 8.8'/%3E%3Cpath d='M16.4 4.2a11 11 0 0 1 0 15.6'/%3E%3C/svg%3E") center/contain no-repeat}
.ws em{font:italic 400 12.5px/1 var(--serif);color:var(--band-ink);opacity:.72;margin-top:5px}
.nav .sp{flex:1}
/* Hover changes the colour, not the shape: nothing moves under the pointer. */
/* :not(.ws) because the wordmark is an anchor too. */
.nav a:not(.ws){font-size:13px;text-decoration:none;transition:color .15s ease;color:var(--band-ink)}
.nav a:not(.ws):hover{color:var(--band-ink)}
.nav .back{margin:0}
.ws{text-decoration:none;transition:opacity .15s ease}
.ws:hover{opacity:.8}
.nav .links{display:flex;align-items:stretch;gap:2px;margin-left:16px;align-self:stretch}
.nav .links a{display:inline-flex;align-items:center;padding:0 10px 9px;font-size:13.5px;font-weight:500;
opacity:.78;white-space:nowrap;border-bottom:2px solid transparent;margin-bottom:-9px;
transition:opacity .12s ease,border-color .12s ease}
.nav .links a:hover{opacity:1}
.nav .links a[aria-current=page]{opacity:1;border-bottom-color:var(--wr)}
.nav .links a:focus-visible{outline:2px solid var(--wr);outline-offset:2px}
/* The account button beside Sign in on a public page: a bordered pill,
centred on the band, without the underline offset the page links carry. */
.nav a.cta{border:1px solid var(--band-line);border-radius:var(--r2);padding:6px 12px;margin-bottom:0;align-self:center;border-bottom-color:var(--band-line);font-size:13.5px;font-weight:500;color:var(--band-ink);text-decoration:none;white-space:nowrap}
.nav a.cta:hover{border-color:var(--band-ink)}
/* A link dressed as the ghost button, and a name that is a link. */
.nav a.ghost{display:inline-flex;align-items:center;border:1px solid var(--band-line);text-decoration:none}
.nav a.who{text-decoration:none}
/* The settings cog, placed by nav.js beside the name on every account page. */
.nav .gear{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:var(--r2);
color:var(--band-ink);opacity:.82;border:1px solid transparent}
.nav .gear:hover,.nav .gear[aria-current=page]{opacity:1;border-color:var(--band-line)}
.nav .gear .ic{width:17px;height:17px;margin:0;vertical-align:0;color:inherit}
/* The theme switch, placed by theme.js beside the spacer: the same shape as
the cog, a sun on the dark band and a moon on the light one. */
.nav .theme{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;
width:32px;height:32px;border-radius:var(--r2);color:var(--band-ink);opacity:.82;border:1px solid transparent}
.nav .theme:hover{opacity:1;border-color:var(--band-line)}
.nav .theme:focus-visible{outline:2px solid var(--wr);outline-offset:2px}
.theme svg{display:block;width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
/* On a page with no band -- sign in, sign up -- it sits in the corner. */
.theme.float{position:fixed;top:14px;right:14px;z-index:70;display:inline-flex;align-items:center;justify-content:center;
width:34px;height:34px;padding:0;border-radius:var(--r2);cursor:pointer;
background:var(--card);color:var(--ink-2);border:1px solid var(--line-2)}
.theme.float:hover{color:var(--ink);border-color:var(--brand)}
.theme.float:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.nav .ghost{padding:7px 12px;font-size:12.5px;border-radius:var(--r2);color:var(--band-ink);border-color:var(--band-line);background:transparent}
.nav .ghost:hover:not(:disabled){border-color:var(--band-ink);color:var(--band-ink)}
.nav .who{font-size:12.5px;color:var(--band-ink);opacity:.78;white-space:nowrap;overflow:hidden;
text-overflow:ellipsis;max-width:34ch}
.nav .who b{color:var(--band-ink);font-weight:600}
/* With four page links the row can run short of room at 1100px. The brand,
the links and the buttons keep their shape; only the signed-in name gives
way, to its ellipsis, and then the spacer. Before this the tagline broke
into three lines and Sign out into two. */
.nav .ws,.nav .links,.nav .ghost,.nav .gear,.nav .theme{flex:none}
/* The right-hand order is fixed here, not by which script ran first: the
name, the theme switch and the cog side by side, Sign out at the edge. */
.nav .who{order:1}
.nav .gear{order:2}
.nav .ghost{order:3}
.nav .theme{order:4;margin-left:4px}
.nav .links[aria-label=Account]{margin-left:0}
.nav .ws em,.nav .ghost{white-space:nowrap}
.nav .who{flex:0 1 auto;min-width:0}
@media (max-width:700px){
/* One row for the brand, the cog and sign out; the page links on a row
of their own underneath, scrolling sideways if they must. The tagline
goes, or the first row does not fit a phone. */
.nav{flex-wrap:wrap;padding-bottom:0;gap:6px 10px}
.nav .ws em{display:none}
.nav .ws{font-size:18px}
.nav .who{display:none}
.nav .gear,.nav .theme{width:30px;height:30px}
.nav .ghost{padding:6px 10px;font-size:12px}
.nav .links{order:9;flex-basis:100%;margin:0 0 0 -10px;overflow-x:auto;scrollbar-width:none;align-self:auto}
.nav .links a{padding:8px 10px;margin-bottom:0;white-space:nowrap}
/* Four page links do not fit a phone with their icons; the words alone
do, so the row reads whole instead of ending mid-word off the edge. */
.nav .links:not([aria-label=Account]) a .ic{display:none}
.nav .links:not([aria-label=Account]) a{padding:8px 8px}
.nav .links[aria-label=Account]{order:0;flex-basis:auto;margin:0;overflow:visible;gap:0}
.nav .links[aria-label=Account] a{padding:6px 8px}
.nav .links[aria-label=Account] a.cta{padding:6px 10px;margin-left:4px}
.nav .theme{margin-left:0}
}
/* --- cards and forms ----------------------------------------------------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r3);
padding:20px 22px 22px;margin:0 0 14px}
.chead{display:flex;align-items:baseline;gap:9px;margin:0 0 3px}
.num{flex:none;display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;
border-radius:50%;background:var(--brand);color:var(--on-brand);font:600 11px/1 var(--mono)}
.state{margin-left:auto;font:600 11px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase}
.state.ok{color:var(--ok)} .state.er{color:var(--er)} .state.wr{color:var(--wr-ink)}
.hint{margin:0 0 13px 31px;color:var(--ink-3);font-size:13px;max-width:70ch}
.hint.flush{margin-left:0}
.body{margin-left:31px}
.body.flush{margin-left:0}
label{display:block;margin:0 0 5px;font-size:12px;font-weight:600;color:var(--ink-2)}
input,textarea,select{width:100%;padding:9px 11px;border:1px solid var(--line-2);border-radius:var(--r2);
background:var(--card);color:var(--ink);font:14px/1.5 var(--disp)}
textarea{min-height:70px;resize:vertical;font-family:var(--mono);font-size:13px}
input:focus,textarea:focus,select:focus{outline:0;border-color:var(--brand);box-shadow:var(--ring)}
.bad input,.bad textarea,.bad select{border-color:var(--er)}
.bad input:focus,.bad textarea:focus,.bad select:focus{box-shadow:var(--ring-er)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.gap{margin-top:12px}
.err{margin:6px 0 0;font-size:12.5px;color:var(--er);display:none}
/* The challenge box. Empty until the widget renders and zero-height when no
key is configured, so a page with the challenge off has no gap where it
would have been. */
.cap{margin:12px 0 0}
.cap:empty{margin:0}
/* When the widget could not load at all. Says so rather than leaving a blank
space above a button whose form the server is about to refuse. */
.cap.capfail{font-size:12.5px;line-height:1.5;color:var(--er);margin:12px 0 0}
.err.wr{color:var(--wr-ink)}
.card.bad .err,.card.warn .err{display:block}
/* --- the step, and how far through it ------------------------------------ */
.eyebrow{margin:0 0 12px;font:500 11px/1 var(--mono);letter-spacing:.16em;
text-transform:uppercase;color:var(--wr-ink)}
.eyebrow b{font-weight:500;color:var(--ink-4)}
.prog{display:flex;align-items:center;gap:14px;margin:22px 0 0;max-width:520px}
.track{flex:1;height:4px;border-radius:2px;background:var(--card-3);overflow:hidden}
.track i{display:block;height:100%;width:0;background:var(--brand);transition:width .35s cubic-bezier(.32,.72,.35,1)}
.pcount{font:500 12px/1 var(--mono);color:var(--ink-3);white-space:nowrap}
/* --- a run in progress --------------------------------------------------
Shared by the questions page (generating) and the sessions page (asking).
Unknown progress slides a marigold segment along a green track; known
progress fills it. The line under it says what is happening in words,
with the elapsed time in the mono. */
.runtrack{height:5px;border-radius:3px;background:var(--brand-tint);overflow:hidden}
.runfill{height:100%;width:38%;border-radius:3px;background:var(--wr);
animation:slide 1.4s cubic-bezier(.45,.05,.55,.95) infinite alternate}
.runfill.known{animation:none;transform:none;width:0;background:var(--brand);transition:width .5s ease}
@keyframes slide{from{transform:translateX(-30%)}to{transform:translateX(230%)}}
@media (prefers-reduced-motion:reduce){ .runfill{animation-duration:3s} }
.runsay{margin:9px 0 0;font-size:13px;color:var(--ink-2);line-height:1.5}
.runsay b{font-weight:600}
/* --- actions ------------------------------------------------------------- */
.bar{background:var(--card);border:1px solid var(--line);border-radius:var(--r3);
padding:13px 18px;margin:4px 0 22px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
button{font:500 14px/1 var(--disp);padding:11px 18px;border-radius:var(--r2);border:1px solid transparent;cursor:pointer}
button:disabled{opacity:.5;cursor:default}
.go{background:var(--brand);color:var(--on-brand);border-color:var(--brand)}
.go:hover:not(:disabled){background:var(--brand-ink);border-color:var(--brand-ink)}
.go.wide{width:100%}
.ghost{background:transparent;color:var(--ink-2);border-color:var(--line-2)}
.ghost:hover:not(:disabled){border-color:var(--brand);color:var(--brand-ink)}
.note{margin:0;color:var(--ink-4);font-size:12px;flex:1;min-width:200px}
/* --- messages and tables ------------------------------------------------- */
.msg{border-radius:var(--r2);padding:11px 14px;margin:0 0 9px;font-size:13.5px;border:1px solid transparent}
.msg.bad{background:var(--er-tint);border-color:var(--er);color:var(--er-ink)}
.msg.warn{background:var(--wr-tint);border-color:var(--wr);color:var(--wr-ink)}
.msg.good{background:var(--ok-tint);border-color:var(--ok);color:var(--ok)}
.tbl{width:100%;border-collapse:collapse;font-size:13px}
.tbl th{text-align:left;font:500 11px/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;
color:var(--ink-3);padding:0 10px 7px 0;border-bottom:1px solid var(--ink)}
.tbl td{padding:7px 10px 7px 0;border-bottom:1px solid var(--line);vertical-align:top}
.tbl tr.grp td{border-bottom:2px solid var(--line-2)}
.mono{font-family:var(--mono);font-size:12.5px}
.tag{display:inline-block;padding:2px 7px;border-radius:var(--r1);border:1px solid var(--line-2);color:var(--ink-2);font-size:11.5px;font-weight:500}
.tag.me{border-color:var(--brand);color:var(--brand-ink);background:var(--brand-tint)}
.hide{display:none}
@media (max-width:560px){
.hint,.body{margin-left:0}
.row2{grid-template-columns:1fr}
}
/* The wider column a signed-in page uses. */
.page{max-width:1160px}
/* --- shared page furniture -----------------------------------------------
The masthead is a title page: a marigold running label, the title in the
serif, a line of what the page is, and the controls at the right. */
.masthead{display:flex;align-items:flex-end;gap:28px;flex-wrap:wrap;padding:36px 0 24px;
border-bottom:2px solid var(--ink);margin:0 0 24px}
.mtext{flex:1;min-width:290px}
.masthead h1{margin:0 0 8px;font-size:clamp(32px,4.2vw,46px);line-height:1.04;font-weight:500;
font-variation-settings:"opsz" 144}
.masthead h1 em{color:var(--brand-ink)}
.mact{display:flex;flex-direction:column;align-items:flex-end;gap:7px}
.mact .go{padding:12px 20px;font-size:14px;border-radius:var(--r2);white-space:nowrap}
.mact.three{flex-direction:row;align-items:center;flex-wrap:wrap;gap:8px}
.mact.three .go{padding:11px 18px;font-size:13.5px}
.gonext{font:500 13.5px/1 var(--disp);padding:11px 16px;border-radius:var(--r2);
cursor:pointer;border:1px solid var(--line-2);background:transparent;color:var(--ink-2);
white-space:nowrap;transition:border-color .12s ease,color .12s ease}
.gonext:hover:not(:disabled){border-color:var(--brand);color:var(--brand-ink)}
.gonext:disabled{opacity:.45;cursor:default}
/* A section of the report: a card on the paper with a heading in the serif,
its count in the mono beside it, and a rule under the heading. */
.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--r3);
padding:22px 26px 24px;display:flex;flex-direction:column;margin:0 0 18px;
/* min-width:0, or a wide table inside a panel widens the page past a
phone's screen instead of scrolling inside its wrapper. */
min-width:0}
.shead{display:flex;align-items:baseline;gap:12px;margin:0 0 16px;padding:0 0 10px;border-bottom:1px solid var(--line)}
.shead h2{font-size:20px}
.shead a{margin-left:auto;font-size:12.5px;text-decoration:none;color:var(--brand-ink);font-weight:500}
.shead a:hover{color:var(--ink)}
.shead .k{margin-left:auto}
.shead .cap{margin-left:0;font:500 11.5px/1 var(--mono);color:var(--ink-4);letter-spacing:.02em}
.linky{all:unset;cursor:pointer;margin-left:auto;font-size:12.5px;font-weight:500;color:var(--brand-ink)}
.linky:hover{color:var(--ink)}
.empty{margin:0;font-size:13.5px;color:var(--ink-3);line-height:1.6}
.empty a{font-weight:500}
.empty .linky{margin-left:0;text-decoration:underline}
/* ------------------------------------------------------------------ */
/* the four steps */
/* ------------------------------------------------------------------ */
.rail{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:0;
background:var(--card);border:1px solid var(--line);border-radius:var(--r3);
padding:18px 22px 16px;margin:0 0 18px}
.rstep{position:relative;display:flex;flex-direction:column;align-items:center;gap:7px;
text-align:center;min-width:0;padding:0 8px}
.rstep::before{content:'';position:absolute;top:12px;right:50%;left:-50%;height:2px;
margin:0 20px;background:var(--line)}
.rstep:first-child::before{display:none}
.rstep.done::before,.rstep.here::before{background:var(--brand)}
.rstep .node{position:relative;z-index:1;flex:none;width:26px;height:26px;border-radius:50%;
display:grid;place-items:center;font:600 11px/1 var(--mono);
border:2px solid var(--line-2);color:var(--ink-4);background:var(--card)}
.rstep.here .node{border-color:var(--wr);color:var(--wr-ink)}
.rstep.done .node{border-color:var(--brand);background:var(--brand);color:var(--on-brand)}
.rstep b{display:block;font-size:13.5px;font-weight:500;color:var(--ink-4);line-height:1.35}
.rstep.here b,.rstep.done b{color:var(--ink)}
.rstep i{display:block;font-style:normal;font-size:12px;color:var(--ink-4);line-height:1.4;
overflow-wrap:anywhere}
.rstep.later .node,.rstep.wait .node{border-style:dashed}
.rstep.lock .node{border-style:solid;background:var(--card-2);color:var(--ink-4)}
.rstep.lock i{color:var(--ink-4);font-style:italic}
a.rstep{text-decoration:none;color:inherit;cursor:pointer;border-radius:var(--r2);
padding:4px 2px;transition:background .12s ease}
a.rstep:hover{background:var(--card-2)}
a.rstep:hover b{color:var(--ink)}
a.rstep:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
@media (max-width:760px){
.rail{grid-template-columns:1fr;gap:18px;padding:20px 22px}
.rstep{flex-direction:row;text-align:left;gap:13px;padding:0}
.rstep .txt{min-width:0}
.rstep::before{display:none}
}
/* Narrow, the masthead stacks and the action spans the width. */
@media (max-width:640px){
.masthead{padding:26px 0 18px;gap:18px}
.mact{width:100%;align-items:stretch}
.mact .go{width:100%}
.mact.three .go,.mact.three .gonext{flex:1 1 auto;width:auto}
}
/* --- icons ----------------------------------------------------------------
Painted by icons.js from . They take the colour of
what they sit in: cream on the band, navy in a heading, the figure's own
colour on a tile, inherited on a button. One stroke weight throughout. */
.ic{display:inline-block;width:18px;height:18px;flex:none;vertical-align:-3px;margin:0 9px 0 0;color:var(--brand-ink)}
.ic svg{display:block;width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.nav .links a .ic{width:15px;height:15px;margin-right:7px;color:inherit;vertical-align:-2px}
button .ic,.gonext .ic,.go .ic{width:15px;height:15px;margin-right:7px;vertical-align:-2px;color:inherit}
.ic.ic-r{margin:0 0 0 7px}
.shead h2 .ic{width:19px;height:19px;vertical-align:-3px;margin-right:10px}
/* The session page styles the tile's own sub-line as a block; the
marker is an too and must stay inline beside its label. */
.tile span .ic{display:inline-block;width:13px;height:13px;margin:0 6px 0 0;vertical-align:-2px;color:inherit;line-height:0}
/* The utility, last AND forced.
*
* Last was the whole argument once, and source order only decides between
* rules of equal weight. `.nav a.ghost{display:inline-flex}` is 0-2-1 against
* this rule's 0-1-0, so it won from four hundred lines earlier and the Sign in
* link could not be hidden -- every signed-in visitor to the brief page was
* offered Sign in beside Sign out. Forced, because the job of this class is to
* beat a layout rule it has never heard of. */
.hide{display:none!important}
/* ------------------------------------------------------------------ */
/* The site footer, one block on every page. Static markup rather than a
script, so the links are there for a crawler that runs nothing -- on a
site whose product is being read by crawlers, that is the point. The
brand mark reuses .ws from the top bar and only recolours it for paper. */
.sitefoot{margin:64px 0 0;padding:30px 0 44px;border-top:1px solid var(--line-2);color:var(--ink-3);font-size:13px;line-height:1.55;container-type:inline-size}
.sf-top{display:grid;grid-template-columns:minmax(200px,1.35fr) repeat(4,minmax(0,1fr));gap:26px 28px;align-items:start}
.sf-brand .ws{color:var(--ink);font-size:18px}
.sf-brand .ws:hover{opacity:1;color:var(--brand-ink)}
.sf-brand p{margin:12px 0 0;max-width:34ch;color:var(--ink-3);text-wrap:pretty}
.sf-cols{display:contents}
.sf-cols div{display:flex;flex-direction:column;gap:7px;min-width:0}
.sf-cols b{margin:4px 0 4px;font:500 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-4)}
.sf-cols a{color:var(--ink-2);text-decoration:none;overflow-wrap:anywhere}
.sf-cols a:hover{color:var(--brand-ink)}
.sf-cols a:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:2px}
.sf-bottom{display:flex;flex-wrap:wrap;gap:6px 24px;margin:28px 0 0;padding-top:14px;border-top:1px solid var(--line);font-size:12px;color:var(--ink-4)}
.sf-bottom span:first-child{color:var(--ink-3)}
/* Measured against the footer itself, not the viewport: the sign-in card and
the blog column are narrow on a wide screen, and four columns in 650px
break the email address in half. */
@container (max-width:780px){.sf-top{grid-template-columns:repeat(2,minmax(0,1fr))}.sf-brand{grid-column:1/-1}}
@container (max-width:380px){.sf-top{grid-template-columns:minmax(0,1fr)}}
/* A page's own closing sentence -- a date, a caveat -- sits above the shared
footer as a note, not as a second footer. */
.pagenote{margin:28px 0 0;font-size:12.5px;line-height:1.6;color:var(--ink-4);max-width:78ch;text-wrap:pretty}
.pagenote a{color:var(--brand-ink)}
/* The cookie card: one small dialog at the foot of the page, shown once,
until a choice is made. Drawn from the same tokens as everything else so
it follows the theme. */
.consent{position:fixed;left:14px;bottom:14px;z-index:60;max-width:380px;text-align:left;padding:14px 16px;background:var(--card);color:var(--ink-2);border:1px solid var(--line);border-radius:var(--r3);box-shadow:0 10px 30px rgba(0,0,0,.16);font-size:13.5px;line-height:1.5}
.consent p{margin:0 0 10px}
.consent a{color:var(--brand);text-decoration:underline}
.consent .choice{display:flex;gap:8px;margin:0;padding:0;border:0;background:none}
.consent button{font:inherit;font-weight:600;font-size:13px;padding:8px 14px;border-radius:var(--r2);border:1px solid var(--line-2);background:transparent;color:var(--ink-2);cursor:pointer}
.consent button.yes{background:var(--brand);border-color:var(--brand);color:var(--on-brand)}
@media (max-width:600px){.consent{left:10px;right:10px;bottom:10px;max-width:none}}
/* ---------------- the page ledger (ledger.js) ----------------
* Drawn on the crawlers page and the plan page from the same script, so
* the styles live here rather than twice inline. The funnel, the one
* paragraph it adds up to, and the groups of pages, each page with its
* weeks as one bar coloured by the best thing that happened that week. */
.lf{display:flex;align-items:stretch;gap:6px;flex-wrap:wrap;margin:0 0 14px}
.lf-t{flex:1 1 150px;min-width:140px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r2);background:var(--card-2)}
.lf-t b{display:block;font:500 24px/1.1 var(--serif);font-variation-settings:"opsz" 72;letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums}
.lf-t span{display:block;margin-top:4px;font-size:12px;line-height:1.4;color:var(--ink-4)}
.lf-t.ok b{color:var(--ok)}
.lf-t.no b{color:var(--er-ink)}
.lf-t.setup{border-style:dashed;background:none}
.lf-t .lf-go{display:inline-block;font:600 15px/1.3 var(--disp);color:var(--brand-ink);text-decoration:none}
.lf-t .lf-go:hover{color:var(--ink)}
.lf-a{align-self:center;font-style:normal;color:var(--ink-4);font-size:16px;flex:none}
.lr{margin:0 0 16px;font-size:14.5px;line-height:1.6;color:var(--ink-2);max-width:70ch}
.lr b{color:var(--ink);font-weight:600}
/* Did the fix work. The one claim measured from inside the customer's own
server: the page changed, a crawler came back, an answer moved. Set apart
from the funnel above it because it is a sequence in time, not a count. */
.lproof{margin:0 0 18px;padding:14px 16px;border:1px solid var(--line);border-left:3px solid var(--ink);
border-radius:var(--r2);background:var(--card-2)}
.lproof-h{margin:0;font-size:14px;line-height:1.6;color:var(--ink-2);max-width:74ch}
.lproof-h b{color:var(--ink);font-weight:600}
.lproof-s{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;margin:12px 0 0}
.lps{flex:1 1 140px;min-width:130px;padding:9px 12px;border:1px solid var(--line);border-radius:var(--r2);background:var(--card-3)}
.lps b{display:block;font:500 20px/1.1 var(--serif);font-variation-settings:"opsz" 72;color:var(--ink-4);font-variant-numeric:tabular-nums}
.lps span{display:block;margin-top:3px;font-size:11.5px;line-height:1.4;color:var(--ink-4)}
.lps.on.read b{color:var(--ink)}
.lps.on.cited b{color:var(--wr-ink)}
.lps.on.named b{color:var(--ok)}
.lproof-c{margin:10px 0 0;font:500 11.5px/1.5 var(--mono);color:var(--ink-4);overflow-wrap:anywhere}
/* How far one page has travelled since the fix, beside its path. */
.lstage{display:inline-block;margin-top:4px;font:500 10.5px/1 var(--mono);padding:3px 7px;border-radius:var(--r1);
background:var(--card-3);color:var(--ink-4);white-space:nowrap;cursor:help}
.lstage.reread{background:var(--card-3);color:var(--ink-2)}
.lstage.cited{background:var(--wr-tint);color:var(--wr-ink)}
.lstage.named{background:var(--ok-tint);color:var(--ok)}
.lempty{font-size:13.5px;line-height:1.6;color:var(--ink-3)}
.llg{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center;margin:0 0 6px;font-size:12px;color:var(--ink-4)}
.llg span{display:inline-flex;align-items:center;gap:6px}
.lg{margin:14px 0 0;padding:14px 0 0;border-top:1px solid var(--line)}
.lg-h{display:flex;align-items:center;gap:10px;margin:0 0 6px}
.lg-h b{font:500 13px/1 var(--mono);color:var(--ink-3)}
.lg-act{margin:0 0 6px;font-size:13px;line-height:1.5;color:var(--ink-3)}
.lg details summary{cursor:pointer;font-size:13px;color:var(--brand-ink);font-weight:500;margin:0 0 8px}
.lrow{display:grid;grid-template-columns:minmax(0,1fr) 92px 92px 72px auto;gap:6px 18px;align-items:center;padding:10px 0;border-top:1px solid var(--line);cursor:pointer;outline:none}
.lrow:hover .lp b,.lrow:focus-visible .lp b{color:var(--brand-ink)}
.llog{grid-column:1 / -1;margin:4px 0 2px;padding:8px 12px;border-left:2px solid var(--line-2);cursor:default}
.le{display:grid;grid-template-columns:118px 12px minmax(0,1fr);gap:0 10px;align-items:center;padding:3px 0;font-size:12.5px;line-height:1.5;color:var(--ink-3)}
.le-t{font:500 11px/1.4 var(--mono);color:var(--ink-4);white-space:nowrap}
.le .lb-s{width:10px;height:10px}
.le-x b{font-weight:500;color:var(--ink)}
.llog .lempty{margin:4px 0 0;font-size:12px}
.lrow:first-of-type{border-top:none}
.lp b{display:block;font-size:14px;font-weight:500;color:var(--ink);overflow-wrap:anywhere}
.lp small{display:block;margin-top:3px;font-size:12px;line-height:1.5;color:var(--ink-4)}
.lp small.lwhy{color:var(--ink-2)}
.lp small.lwhy em{font-style:normal;color:var(--ink);font-weight:500}
.lp small.lwhy a{color:var(--brand-ink);font-weight:500;text-decoration:none;margin-left:4px}
.ls{text-align:left}
.ls b{display:block;font:500 17px/1.1 var(--serif);color:var(--ink);font-variant-numeric:tabular-nums}
.ls span{display:block;margin-top:2px;font-size:10.5px;line-height:1.3;color:var(--ink-4);white-space:nowrap}
.lb{display:flex;gap:2px;align-items:center}
.lb-s{display:inline-block;width:11px;height:14px;border-radius:2px;background:var(--line);flex:none}
.lb-s.read{background:var(--ink-4)}
.lb-s.cited{background:var(--wr)}
.lb-s.named{background:var(--ok)}
.lb-s.visited{background:var(--brand)}
/* The fix is the anchor the rest of a row's log is evidence about, so it is
drawn as a rule across the line rather than another coloured state. */
.lb-s.fixed{background:var(--ink);border-radius:1px}
.lb-s.now{outline:1px solid var(--ink-3);outline-offset:1px}
.llg .lb-s{width:10px;height:10px}
.vd{display:inline-block;font:500 11px/1 var(--mono);padding:4px 8px;border-radius:var(--r1);background:var(--card-3);color:var(--ink-3);white-space:nowrap}
.vd.passed{background:var(--er-tint,#f3dede);color:var(--er-ink)}
.vd.read{background:var(--wr-tint);color:var(--wr-ink)}
.vd.named{background:var(--ok-tint);color:var(--ok)}
.vd.unread{background:var(--brand-tint);color:var(--brand-ink)}
.lnotes{margin:16px 0 0;padding-top:10px;border-top:1px solid var(--line);font-size:12px;color:var(--ink-4);line-height:1.65}
@media (max-width:900px){ .lrow{grid-template-columns:minmax(0,1fr) 80px 80px 64px} .lrow .lb{grid-column:1 / -1} .lb{flex-wrap:wrap} }
/* On a phone the three figures cannot sit beside the path: their labels
("reads ยท just now") are wider than the columns, so the grid gave the
path a few pixels and the address stacked one letter to a line. The
path takes the row, the figures share the next one, the bar the third. */
@media (max-width:520px){
.lrow{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px 10px;align-items:start}
.lrow .lp{grid-column:1 / -1}
.ls span{white-space:normal}
}
/* The brand switcher in the nav, for an account with several brands (nav.js). */
.nav .brandpick{order:1;margin:0 8px 0 0;padding:6px 26px 6px 10px;width:150px;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border:1px solid var(--band-line);border-radius:var(--r2);background:transparent;color:var(--band-ink);font:500 12.5px/1.2 var(--disp);cursor:pointer;appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);background-position:calc(100% - 14px) 55%,calc(100% - 9px) 55%;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.nav .brandpick option{color:var(--ink);background:var(--card)}
/* The account line yields before the brand switcher does: the address
ellipsises, and on a narrow bar it goes, since it is on settings too. */
.nav .who{max-width:240px;text-overflow:ellipsis}
.nav .who b{font-weight:500}
@media (max-width:1180px){ .nav .who{display:none} }
@media (max-width:900px){ .nav .brandpick{width:130px;max-width:130px} }
/* The rail, compact: on every page but the dashboard it is orientation, so
the notes fold away except on the step that is this page's turn. */
.rail.compact{padding:10px 16px 8px;margin:0 0 16px}
.rail.compact .rstep{gap:4px}
.rail.compact .rstep .txt b{font-size:12px}
.rail.compact .rstep .txt i{display:none}
.rail.compact .rstep.here .txt i{display:block}
.rail.compact .rstep::before{top:10px}
.rail.compact .node{width:20px;height:20px;font-size:10.5px;line-height:20px}
/* The collection bar on the Questions and Sessions pages: the one choice
every card below depends on, so it sits above them. */
.collbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 14px;padding:10px 14px;border:1px solid var(--line);border-radius:var(--r1);background:var(--card,var(--paper))}
.collbar label{font:600 11.5px/1.2 var(--disp);letter-spacing:.06em;text-transform:uppercase;color:var(--muted,var(--ink));opacity:.8}
.collpick{padding:7px 30px 7px 10px;max-width:min(100%,360px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border:1px solid var(--line);border-radius:var(--r1);background:transparent;color:var(--ink);font:500 14px/1.2 var(--disp);cursor:pointer;appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);background-position:calc(100% - 16px) 55%,calc(100% - 11px) 55%;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.collpick option{color:var(--ink);background:var(--card,var(--paper))}
.collmeta{color:var(--muted,var(--ink));opacity:.75;font-size:13px}
.picklist{display:grid;gap:8px;margin-top:8px}
.pickone{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r1);background:transparent;color:var(--ink);font:inherit;text-align:left;cursor:pointer}
.pickone:hover,.pickone.on{border-color:var(--brand)}
.pickone b{font-weight:600}
.pickone span{color:var(--muted,var(--ink));opacity:.75;font-size:13px}
/* --- Design pass, 15 September 2026 ------------------------------------------------
Depth, motion and finish on the same tokens: a two-step elevation scale,
a lift on anything clickable, one focus ring everywhere, corners a touch
softer. No colour and no typeface changes. */
:root{--r2:6px;--r3:10px;--ease:cubic-bezier(.2,.7,.2,1);
--sh1:0 1px 2px rgba(20,25,42,.05),0 1px 1px rgba(20,25,42,.03);
--sh-hover:0 12px 26px -16px rgba(20,25,42,.38),0 2px 4px -2px rgba(20,25,42,.08)}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){
--sh1:0 1px 2px rgba(0,0,0,.4);--sh-hover:0 14px 30px -16px rgba(0,0,0,.85),0 2px 4px -2px rgba(0,0,0,.4)}}
:root[data-theme=dark]{--sh1:0 1px 2px rgba(0,0,0,.4);--sh-hover:0 14px 30px -16px rgba(0,0,0,.85),0 2px 4px -2px rgba(0,0,0,.4)}
.panel,.bar,.collbar{box-shadow:var(--sh1)}
button,.gonext,.addgo,.xpbtn,.linky,.f{transition:background-color .15s var(--ease),border-color .15s var(--ease),color .15s var(--ease),transform .15s var(--ease),box-shadow .15s var(--ease)}
.go{background-image:linear-gradient(180deg,rgba(255,255,255,.09),rgba(0,0,0,.05));box-shadow:inset 0 1px 0 rgba(255,255,255,.1),var(--sh1)}
.go:hover:not(:disabled){transform:translateY(-1px);box-shadow:var(--sh-hover)}
.go:active:not(:disabled){transform:translateY(0);box-shadow:var(--sh1)}
.ghost:hover:not(:disabled),.gonext:hover:not(:disabled),.addgo:hover:not(:disabled){transform:translateY(-1px);box-shadow:var(--sh1)}
a{text-decoration-thickness:1px;text-underline-offset:.16em;transition:color .15s var(--ease)}
:where(button,a,summary,[tabindex]):focus-visible{outline:2px solid var(--wr);outline-offset:2px}
.tbl tbody tr{transition:background-color .12s var(--ease)}
.tbl tbody tr:hover td{background:var(--card-2)}
.nav{border-bottom-color:rgba(255,255,255,.1);box-shadow:0 0 0 100vmax var(--band),0 1px 0 rgba(0,0,0,.25)}
.rail{box-shadow:var(--sh1)}
dialog.dlg{box-shadow:var(--sh2),0 0 0 1px var(--line)}