/* Default skin = the Feather M1 design system (shadcn palette, Feather pacific-blue + turquoise brand). --font lists Inter FIRST then a system fallback: the "font source" is a presentational PROVIDER — today the system fallback (no external load), later a self-hosted @font-face or a CDN, swappable per environment. See the font/external-media provider note. This :root is the LIGHT M1 (the dev plane); the product defaults to the m1-dark skin below (set by the negotiation script for product hosts). */ :root { --font: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-sans: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace; --fs: 16px; --fs-sm: .85rem; --fs-lg: 1.05rem; --fs-xl: 1.6rem; --lh: 1.55; --weight-strong: 600; --sp-1: .3rem; --sp-2: .6rem; --sp-3: 1rem; --sp-4: 1.5rem; --page-pad: 1.15rem; --maxw: 46rem; --bg: #f4f6f9; --fg: #0f172a; --surface: #f8fafc; --fill: #eef2f7; --fill-2: #e2e8f0; --line: #e2e8f0; --line-soft: #eef2f6; --line-faint: #f1f5f9; --accent: #0092e9; --accent-2: #00dcc0; --accent-fg: #ffffff; --danger: #ef4444; --ok: #16a34a; --hl: #e6fbf7; --radius: 8px; --radius-lg: 12px; --overlay: rgba(15,23,42,.4); /* ── THE SURFACE LADDER ─────────────────────────────────────────────────────────────────────── Andrew Young's alpha UX standard, §2.1, called "the single highest-value change": BORDERS DEFINE EDGES, TONE DEFINES DEPTH. A card does not read as elevated because of its border; it reads as elevated because its fill differs from the band behind it. S0 --topbar-bg the header. Reserved for one element, which is what makes it the anchor. S1 --bg page ground AND sidebar — deliberately the same value. S2 --card cards, tables, panels, accordion bodies. S3 --raised modals, flyouts, popovers. The only level that casts a shadow. Shadow appears only at S3: that is what makes an overlay read as *over*. */ --card: #ffffff; --raised: #ffffff; --inset: #f1f4f8; --shadow: 0 1px 2px rgba(15,23,42,.06), 0 1px 3px rgba(15,23,42,.04); --shadow-lg: 0 8px 24px rgba(15,23,42,.08); --sidebar-bg: #f4f6f9; --sidebar-fg: #0f172a; --sidebar-line: #e2e8f0; --topbar-bg: #eef2f7; } /* M1 dark — the product's default (Feather M1 runs dark: near-black navy ground, elevated cards, a distinct sidebar ground, turquoise-accented nav). Overrides colors only; --font/--radius-* cascade. */ html[data-skin="m1-dark"] { /* THE LADDER, RE-LADDERED. What was here ran bg #020817 < topbar #060c18 < sidebar #0a0f1c < card #0b1220 — four values inside 4% of each other, and INVERTED: the page was darker than the header, and cards were darker than the panels they sat among. So depth was carried entirely by 1px borders, which is mechanism #1 of Andrew's diagnosis and why the build reads flat. The steps below are visible without squinting and ascend in one direction. */ --bg: #101622; --fg: #fafafa; --surface: #161e2c; --fill: #1e293b; --fill-2: #334155; /* A border slightly lighter than whatever it sits on, rather than one fixed navy: translucent white adapts to its own level, which is what lets one value finish an edge at every step. */ --line: rgba(255,255,255,.08); --line-soft: rgba(255,255,255,.05); --line-faint: rgba(255,255,255,.03); --accent: #0092e9; --accent-2: #00dcc0; --accent-fg: #ffffff; --danger: #f87171; --ok: #4ade80; --hl: #0e2a3a; --radius: 8px; --overlay: rgba(0,0,0,.6); --card: #161e2c; --raised: #1c2636; --inset: #0e1420; --shadow: 0 1px 2px rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.35); --shadow-lg: 0 12px 32px rgba(0,0,0,.55); /* S1 — the sidebar shares the page ground. Andrew, AF-002/AF-007: "the tone lighter will be the body content of the page and the left sidebar as well." */ --sidebar-bg: #101622; --sidebar-fg: #cbd5e1; --sidebar-line: rgba(255,255,255,.08); --topbar-bg: #0b0f17; } html[data-skin="soft"] { --raised: #fffdf8; --font: var(--font-sans); --fs: 15px; --bg: #faf8f3; --fg: #2b2b2b; --surface: #f2ece0; --fill: #f1ebdd; --fill-2: #e9dfc9; --line: #c9b48a; --line-soft: #ddcfb2; --line-faint: #efe6d5; --accent: #8a5a2b; --accent-fg: #fff; --hl: #fbeec2; --radius: 6px; } * { box-sizing: border-box; } /* ── THE WHITE PAGE BETWEEN PAGES ─────────────────────────────────────────────────────────────── * * Jeremy, 25 Sep: "it should never reload the page on any of these actions... Should never be a * change of a screen, James. This should just be the actual content inside the screen changing." * James: what we want to capture is the fluidity of experience. Nothing should suddenly show a * white page. * * The background was set on BODY alone. Between two documents the browser paints the HTML * element's background, and its default is white — so every navigation flashed white, against a * skin that is dark by default. Not an architecture problem and not a reason to become a * single-page application: one element had no colour. * * color-scheme tells the browser which way the page leans, so the frame it paints before any * CSS applies — and the scrollbars, and form controls — are already dark rather than white. */ html { background: var(--bg); color-scheme: var(--scheme, light dark); } body { font: var(--fs)/var(--lh) var(--font); margin: var(--page-pad); max-width: var(--maxw); background: var(--bg); color: var(--fg); } /* ── AND THE CHANGE IS A TRANSITION, NOT A CUT ────────────────────────────────────────────────── * * Cross-document view transitions: the browser holds the old page, renders the new one, and * cross-fades. No JavaScript, no client router, no framework — the pages stay server-rendered and * every URL keeps working, which is what transport carries presentation requires. A browser * that does not support this ignores the rule and behaves exactly as before. * * Reduced motion is honoured, because a cross-fade is motion. */ @view-transition { navigation: auto; } @media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } } body.wide { max-width: none; } /* Mobile-first page margin: tighter on small screens for content room, roomier from md up (a responsive token). */ @media (min-width: 40rem) { :root { --page-pad: 2rem; } } h1 { font-size: var(--fs-xl); margin: 0 0 .4rem; } h2 { font-size: var(--fs-lg); margin: 1.4rem 0 .5rem; } p { opacity: .75; margin: 0 0 1rem; } .msg { opacity: 1; } a { color: inherit; } .links { list-style: none; padding: 0; } .links li { padding: .3rem 0; } /* A FORM IS NOT A CONTAINER. This drew a border, a radius and 1rem of padding around EVERY form in the product — a bare element selector, specificity (0,0,1), which form classes declaring only layout never override. Andrew saw it twice: a merge button floating inside a rounded rectangle, a search input inside a second one. Six sites existed purely to undo it, several spelling out that rule's own properties set to zero, which is this rule cancelled by hand. A form that wants to read as a card asks for .boxed — see components.js. */ form { margin: 0 0 1rem; } .boxed { border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem; max-width: 22rem; } label { display: block; margin: 0 0 .6rem; } input, select, textarea { display: block; width: 100%; margin-top: .2rem; font: inherit; padding: .4rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--inset); color: inherit; } button { font: inherit; padding: .4rem .9rem; cursor: pointer; border: 1px solid var(--line); border-radius: var(--radius); background: var(--fill); color: inherit; } /* M1 button variants — accent = the primary filled call-to-action (pacific-blue), ghost = a quiet action. */ .btn-accent { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); font-weight: var(--weight-strong); } .btn-accent:hover { filter: brightness(1.08); } .btn-ghost { background: transparent; border-color: transparent; } .btn-ghost:hover { background: var(--fill); } /* M1 card — an elevated content surface (border + radius + shadow) for list/detail items. */ /* ── THE COMPONENT VOCABULARY, SKINNED. Every class here belongs to a declared component, which is the whole arrangement: the view says what is THERE, the component emits a token, and this decides how it looks. A view that writes an inline font-size has made that decision somewhere no skin can reach and no other screen shares, which is how 415 class names happened. */ .brand { display: flex; justify-content: space-between; align-items: center; gap: 1rem; } .brand-aside { font-size: var(--fs-sm); color: var(--soft); } .section { margin: 0 0 1.6rem; } /* SETTINGS: each choice is an object with edges, not a run of prose. */ .set-lede { max-width: 46rem; margin: -.4rem 0 1.4rem; } .set { display: flex; flex-direction: column; gap: 1.25rem; max-width: 46rem; } .set > .section { margin: 0; border: 1px solid var(--line, rgba(127,127,127,.22)); border-radius: var(--radius); padding: 1.1rem 1.2rem 1.2rem; background: var(--card, transparent); } .set > .section > .section-h { margin: 0 0 .5rem; padding-bottom: .5rem; border-bottom: 1px solid var(--line-soft, rgba(127,127,127,.13)); } .set > .section > .section-h h2 { font-size: 1rem; } /* The explanation, then the control, then what it is set to — in that order, with room between. */ .set > .section p { margin: 0 0 .7rem; max-width: 42rem; } .set > .section form { margin: .2rem 0 .7rem; } .set > .section p:last-child { margin-bottom: 0; font-size: .86rem; } .section-h { display: flex; align-items: baseline; gap: .6rem; margin: 0 0 .6rem; } .section-h h2 { margin: 0; font-size: 1.05rem; } .stack { display: flex; flex-direction: column; gap: .7rem; } .stack-tight { gap: .35rem; } .stack-loose { gap: 1.4rem; } .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--grid-min, 16rem), 1fr)); gap: .7rem; } /* The reporter sits out of the way until it is wanted, and never over the content. */ .reporter { margin: 2.5rem 0 .5rem; border-top: 1px solid var(--line, rgba(127,127,127,.22)); padding-top: .75rem; max-width: 46rem; } .reporter > summary { cursor: pointer; color: var(--soft); font-size: .84rem; list-style: none; } .reporter > summary::-webkit-details-marker { display: none; } .reporter > summary::before { content: '⚑ '; opacity: .7; } .reporter > summary:hover { color: var(--accent); } .reporter form { display: flex; flex-direction: column; gap: .5rem; max-width: 42rem; margin-top: .6rem; } .reporter label { font-size: .82rem; color: var(--soft); } .reporter textarea { font: inherit; font-size: .9rem; padding: .5rem .6rem; border-radius: var(--radius); border: 1px solid var(--line, rgba(127,127,127,.3)); background: var(--bg); color: var(--fg); resize: vertical; } .reporter button { align-self: flex-start; } .report-said-back { font-size: .86rem; color: var(--good, #39b07a); margin-top: .5rem; } /* THE CONTACT DRAWER. Mobile-first: full width on a phone, a panel from the right from md up. */ /* The backdrop is hidden the same way, for the same reason: a full-screen fixed layer sitting over every * page is a thing gestures can land on, whatever its opacity says. */ .cdrawer-back { position: fixed; inset: 0; background: rgba(0,0,0,.45); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .18s ease, visibility .18s; z-index: 60; } /* CLOSED MEANS GONE, NOT MERELY MOVED. * * This was a fixed, full-height, overflow-y:auto panel translated off to the right — still laid out, * still a scroll container, still a target for a wheel or a trackpad gesture. Scrolling near the bottom of * a page chained into it and the page rubber-banded instead of scrolling, on every page, because the * drawer is in the shell of all of them. * * visibility:hidden takes it out of hit-testing entirely while keeping the transition; overscroll- * behavior:contain stops a scroll inside it chaining to the page when it IS open, which is the same * bug in the other direction. Both are the fix, not one. */ .cdrawer { position: fixed; top: 0; right: 0; bottom: 0; width: 100%; max-width: 34rem; background: var(--bg); border-left: 1px solid var(--line, rgba(127,127,127,.25)); transform: translateX(100%); transition: transform .22s cubic-bezier(.2,.7,.3,1), visibility .22s; overflow-y: auto; overscroll-behavior: contain; visibility: hidden; z-index: 61; padding: 1rem 1.1rem 2rem; } .cdrawer-open .cdrawer { transform: translateX(0); visibility: visible; } .cdrawer-open .cdrawer-back { opacity: 1; visibility: visible; pointer-events: auto; } .cdrawer-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .5rem; } .cdrawer-full { font-size: .84rem; } .cd-rest { font-size: .84rem; margin-top: 1.2rem; padding-top: .8rem; border-top: 1px solid var(--line, rgba(127,127,127,.2)); } .cdrawer-x { background: none; border: 0; color: var(--soft); font-size: 1.6rem; line-height: 1; cursor: pointer; padding: 0 .2rem; } .cdrawer-x:hover { color: var(--fg); } /* A DRAWER THAT FLIES IN IS A DRAWER THAT MAKES SOMEBODY ILL. Honour the preference. */ @media (prefers-reduced-motion: reduce) { .cdrawer, .cdrawer-back { transition: none; } } /* The LinkedIn export: steps somebody follows, and a real file picker. */ .liho { margin: .2rem 0 0; padding-left: 1.2rem; line-height: 1.7; } .liho li { margin: .2rem 0; } .lifile { display: flex; flex-direction: column; gap: .7rem; max-width: 40rem; } .lipick { display: flex; align-items: center; gap: .8rem; border: 1px dashed var(--line, rgba(127,127,127,.4)); border-radius: var(--radius); padding: .9rem 1rem; cursor: pointer; } .lipick:hover { border-color: var(--accent); } .lipick input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; } .lipick-l { flex: 1; display: flex; flex-direction: column; } .lipick-go { font-size: .84rem; color: var(--accent); } .lichosen { font-size: .84rem; } .lipaste > summary { cursor: pointer; font-size: .84rem; color: var(--soft); } .lipaste textarea { width: 100%; margin-top: .5rem; font: inherit; font-size: .86rem; padding: .5rem .6rem; border-radius: var(--radius); border: 1px solid var(--line, rgba(127,127,127,.3)); background: var(--bg); color: var(--fg); } /* The dossier: how you two speak, why they are here, and who you both know. */ .cd-rhythm { border: 1px solid var(--line, rgba(127,127,127,.22)); border-radius: var(--radius); padding: .8rem 1rem; } .cd-said { margin: 0 0 .5rem; font-size: .95rem; } .cd-facts, .cd-muts, .cd-why { list-style: none; padding: 0; margin: 0; } .cd-facts { display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; font-size: .84rem; color: var(--soft); } .cd-facts b { color: var(--fg); font-variant-numeric: tabular-nums; } .cd-why li { border-left: 2px solid var(--accent); padding: .3rem 0 .3rem .7rem; margin: .4rem 0; font-size: .88rem; } .cd-kind { font: 600 .66rem/1 var(--mono); color: var(--accent); display: block; margin-bottom: .2rem; } .cd-mutnote { font-size: .84rem; margin: 0 0 .4rem; } .cd-muts { display: flex; flex-wrap: wrap; gap: .4rem; } .cd-muts li a { display: inline-block; border: 1px solid var(--line, rgba(127,127,127,.3)); border-radius: 999px; padding: .2rem .7rem; font-size: .84rem; text-decoration: none; } /* Two engines, side by side. */ .ce-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-top: 1rem; } @media (min-width: 52rem) { .ce-grid { grid-template-columns: 1fr 1fr; } } .ce { border: 1px solid var(--line, rgba(127,127,127,.25)); border-radius: var(--radius); padding: .9rem 1rem; } .ce-h { display: flex; justify-content: space-between; align-items: baseline; gap: .6rem; border-bottom: 1px solid var(--line, rgba(127,127,127,.2)); padding-bottom: .5rem; margin-bottom: .6rem; } .ce-meta { font: .74rem/1 var(--mono); color: var(--soft); } .ce-list { margin: 0; padding-left: 1.1rem; } .ce-list li { margin: .6rem 0; } .ce-type { font: 600 .64rem/1 var(--mono); letter-spacing: .09em; text-transform: uppercase; color: var(--accent); } .ce-why { margin: .25rem 0 .1rem; font-size: .88rem; line-height: 1.45; } .ce-src { margin: 0; font-size: .74rem; font-style: italic; color: var(--faint, var(--soft)); } .ce-refused { margin: .2rem 0 .4rem; font-size: .88rem; } .ce-world { border: 1px solid var(--line, rgba(127,127,127,.22)); border-radius: var(--radius); padding: .8rem 1rem; } .ce-form { display: flex; flex-wrap: wrap; gap: .6rem; align-items: end; margin: .8rem 0 1rem; } .ce-form label { display: flex; flex-direction: column; font-size: .8rem; color: var(--soft); gap: .2rem; } /* Feedback, where the person already is. */ .fbk-back { position: fixed; inset: 0; background: rgba(0,0,0,.45); opacity: 0; pointer-events: none; transition: opacity .2s ease; z-index: 1000; } body.fbk-open .fbk-back { opacity: 1; pointer-events: auto; } .fbk { position: fixed; z-index: 1001; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(30rem, 94vw); background: var(--card, var(--bg)); border: 1px solid var(--line, rgba(127,127,127,.3)); border-radius: 14px; padding: 1rem 1.1rem; box-shadow: var(--shadow-lg, 0 20px 60px rgba(0,0,0,.4)); } .fbk[hidden] { display: none; } .fbk-form { display: flex; flex-direction: column; gap: .6rem; } .fbk-head { display: flex; justify-content: space-between; align-items: center; } .fbk-x { background: none; border: 0; font-size: 1.4rem; line-height: 1; cursor: pointer; color: var(--soft); } .fbk-note { font-size: .82rem; margin: 0; } .fbk textarea { width: 100%; font: inherit; font-size: .9rem; padding: .5rem .6rem; border-radius: var(--radius); border: 1px solid var(--line, rgba(127,127,127,.3)); background: var(--bg); color: var(--fg); } .fbk-row { display: flex; justify-content: space-between; align-items: center; gap: .6rem; } .fbk-build { font: .7rem/1 var(--mono); } #fbk-prev { max-width: 100%; border-radius: var(--radius); border: 1px solid var(--line, rgba(127,127,127,.3)); } .usr-item { text-align: left; width: 100%; background: none; border: 0; font: inherit; cursor: pointer; } .nav { display: flex; gap: .2rem; flex-wrap: wrap; } .nav-i { padding: .35rem .7rem; border-radius: var(--radius); text-decoration: none; color: var(--soft); } .nav-i:hover { background: var(--fill-1, rgba(127,127,127,.08)); } .nav-here { color: var(--accent); font-weight: 600; } .cta { margin: .8rem 0 1.4rem; } .cta-lead { font-size: 1.15rem; max-width: 34rem; color: var(--soft); margin: 0 0 1.2rem; } /* "Formatting is strange on button and flat" — 9/24. It was a rectangle the width of the card with the default radius and no depth, against a dark ground where a flat fill reads as a disabled band rather than the one thing on the screen to press. Same pill the rest of the product uses for a primary act. */ .cta-btn { display: inline-block; text-decoration: none; padding: .7rem 1.4rem; border-radius: 999px; font-size: 1.05rem; font-weight: var(--weight-strong); text-align: center; box-shadow: 0 1px 3px rgba(0,0,0,.22); } .cta-btn:hover { transform: translateY(-1px); } @media (prefers-reduced-motion: reduce) { .cta-btn:hover { transform: none; } } .cta-aside { margin: 1rem 0 0; font-size: var(--fs-sm); color: var(--soft); } .notice { padding: .5rem .75rem; border-radius: var(--radius); border-left: 3px solid var(--line); margin: .5rem 0; } .notice-bad { border-left-color: var(--danger); } .notice-ok { border-left-color: var(--ok); } .notice-accent { border-left-color: var(--accent); } /* NOTHING HERE YET, AND WHY. An empty list rendered as an empty list reads as broken; saying what would fill it says what to do. The commonest screen a new person meets. */ .empty { color: var(--soft); font-style: italic; padding: .8rem 0; } .avatar { display: inline-block; width: 2rem; height: 2rem; border-radius: 50%; background-size: cover; background-position: center; background-color: var(--fill-2, rgba(127,127,127,.18)); vertical-align: middle; } .avatar-initial { display: inline-flex; align-items: center; justify-content: center; font: 600 .8rem var(--font); color: var(--soft); } .icon { display: inline-block; } .eyebrow { font: 600 .7rem/1 var(--font-mono); color: var(--accent); margin: 0 0 .4rem; } /* A HISTORY — what happened, when, and which way it went. The interaction log, the thread list and the claim list are all this, and all three drew their own borders and letter-spacing. */ .log { list-style: none; padding: 0; margin: .5rem 0; } .entry { padding: .55rem 0; border-bottom: 1px solid var(--line-soft); } .entry:last-child { border-bottom: 0; } .entry-meta { font-size: .68rem; color: var(--faint); } .entry-t { margin: .1rem 0 0; } .entry-a { margin: .2rem 0 0; font-size: var(--fs-sm); color: var(--soft); } .card { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--card); box-shadow: var(--shadow); padding: .85rem 1rem; margin: 0 0 .7rem; } .card-h { display: flex; justify-content: space-between; align-items: baseline; gap: .6rem; } .card-h h3 { margin: 0; font-size: 1rem; } .card-b { margin: .35rem 0 0; opacity: .85; } .card-b p { margin: 0; } .card-a { margin: .65rem 0 0; display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; } .cards { list-style: none; padding: 0; margin: 0 0 1rem; } .chip { display: inline-block; font: 700 .66rem/1 var(--font-mono); padding: .28rem .55rem; border-radius: 6px; } .chip-ok { color: var(--ok); background: var(--hl); } .chip-accent { color: var(--accent); background: var(--hl); } .chip-warn { color: var(--danger); background: var(--fill); } .chip-soft { color: var(--fg); background: var(--fill); } .rows { list-style: none; padding: 0; margin: .5rem 0; } .rows li { display: flex; align-items: baseline; gap: .5rem; padding: .5rem 0; border-bottom: 1px solid var(--line-soft); } .rows .row-r { margin-left: auto; } .goal-item { display: flex; align-items: center; gap: .6rem; padding: .5rem 0; border-bottom: 1px solid var(--line-soft); } .goal-item.sub { padding-left: 1.6rem; } .goal-item.sub .goal-obj::before { content: "\21B3 "; color: var(--faint); } .goal-item.complete .goal-obj { text-decoration: line-through; opacity: .55; } .goal-obj { flex: 1; font-weight: var(--weight-strong); } /* FIRST-ORIENTATION landing — a generous, felt entry, centered with real margins on large screens. */ .landing { max-width: 1200px; margin: 0 auto; padding: clamp(2rem, 5vh, 4rem) clamp(1.5rem, 6vw, 5rem) 5rem; } .hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; min-height: 68vh; padding: clamp(1rem, 4vh, 3rem) 0; } .eyebrow { font-size: .74rem; color: var(--soft); margin: 0 0 1rem; opacity: 1; } .hero-h { font-size: clamp(2.4rem, 5.6vw, 4rem); line-height: 1.02; letter-spacing: -.035em; margin: 0 0 1.1rem; } .hero-hl { background: linear-gradient(100deg, var(--accent), var(--accent-2)); -webkit-background-clip: text; background-clip: text; color: transparent; } .hero-sub { font-size: clamp(1.05rem, 1.7vw, 1.28rem); color: var(--soft); max-width: 38ch; line-height: 1.6; opacity: 1; margin: 0 0 1.9rem; } .hero-cta { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; } .hero-btn { display: inline-block; padding: .8rem 1.6rem; border-radius: var(--radius); text-decoration: none; font-weight: var(--weight-strong); font-size: 1.02rem; } .hero-btn.ghost { border: 1px solid var(--line); color: inherit; } .hero-btn.ghost:hover { background: var(--fill); } .hero-graph { width: 100%; height: 100%; min-height: 52vh; display: block; } /* The graph's hover contact card — a PILL: avatar cap (left) · name/title·company (middle) · CQ cap (right). */ .fgcard { position: fixed; z-index: 20; pointer-events: none; opacity: 0; transform: translateY(4px); transition: opacity .18s ease, transform .18s ease; display: flex; align-items: stretch; height: 50px; background: var(--card); border: 1px solid var(--line); border-radius: 999px; box-shadow: var(--shadow-lg); overflow: hidden; } .fgcard.on { opacity: 1; transform: translateY(0); } .fgcard-av { width: 50px; flex: none; background-size: cover; background-position: center; background-color: var(--fill); } .fgcard-av-i { display: flex; align-items: center; justify-content: center; background: linear-gradient(140deg, var(--accent), var(--accent-2)); color: #fff; font-weight: 700; font-size: .82rem; letter-spacing: .02em; } .fgcard-mid { display: flex; flex-direction: column; justify-content: center; gap: .1rem; padding: 0 .55rem 0 .7rem; white-space: nowrap; } .fgcard-name { font-weight: var(--weight-strong); font-size: .9rem; letter-spacing: -.01em; } .fgcard-role { font-size: .72rem; color: var(--soft); } .fgcard-cq { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 .9rem; background: color-mix(in srgb, var(--accent) 18%, transparent); border-left: 1px solid var(--line-soft); } .fgcard-cq-l { font-size: .55rem; color: var(--soft); line-height: 1; } .fgcard-cq-n { font-family: var(--mono); font-weight: 700; font-size: 1.15rem; color: var(--accent); line-height: 1.15; } .personas { margin: clamp(2.5rem, 7vh, 6rem) 0 1rem; } .ph-eye { font-size: .74rem; color: var(--accent); margin: 0 0 .5rem; opacity: 1; } .ph { font-size: clamp(1.3rem, 2.6vw, 1.9rem); letter-spacing: -.02em; margin: 0 0 1.7rem; max-width: 26ch; } .pcards { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2vw, 1.6rem); } .story { display: flex; flex-direction: column; gap: .55rem; text-decoration: none; color: inherit; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.5rem; box-shadow: var(--shadow); transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; } .story:hover { transform: translateY(-5px); border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); box-shadow: var(--shadow-lg); } .story-av { width: 72px; height: 72px; border-radius: 50%; background-size: cover; background-position: center; background-color: var(--fill); box-shadow: 0 0 0 1px var(--line), 0 6px 16px rgba(0, 0, 0, .18); margin-bottom: .3rem; } .story-name { font-weight: var(--weight-strong); font-size: 1.15rem; letter-spacing: -.01em; } .story-role { font-size: .72rem; color: var(--soft); margin-top: -.4rem; } .story-kicker { color: var(--soft); line-height: 1.55; flex: 1; } .story-link { font-weight: var(--weight-strong); color: var(--accent); font-size: .92rem; margin-top: .4rem; } @media (max-width: 52rem) { .hero { grid-template-columns: 1fr; min-height: 0; } .hero-graph { min-height: 34vh; order: -1; } .pcards { grid-template-columns: 1fr; } } .scroll { overflow-x: auto; margin-bottom: 1rem; } table { border-collapse: collapse; width: 100%; } th, td { border: 1px solid var(--line-soft); padding: .35rem .6rem; text-align: left; vertical-align: top; } th { background: var(--fill); } .filter { border: 1px solid var(--line); border-radius: var(--radius); padding: .8rem; margin: 0 0 1rem; display: flex; gap: .8rem; flex-wrap: wrap; align-items: end; max-width: none; } .filter label { display: block; margin: 0; } .filter input, .filter select { display: block; width: auto; margin-top: .2rem; font: inherit; padding: .3rem; border: 1px solid var(--line); background: var(--inset); } .st { opacity: .6; font-size: var(--fs-sm); margin-bottom: 1rem; } .soft { opacity: .5; } .undef { background: var(--fill-2); } .steps { list-style: none; padding: 0; margin: 0 0 1rem; } .steps li { padding: .45rem .5rem; border-left: 3px solid transparent; } .steps li.cur { background: var(--fill-2); border-left-color: var(--accent); } .mk { display: inline-block; width: 1.3em; } .prod { margin: .25rem 0 0 1.3em; font-size: var(--fs-sm); } .pos { margin: 0 0 1rem; } .nav { margin: 1.2rem 0; } .go { border: 1px solid var(--line); border-radius: var(--radius); padding: .2rem .7rem; text-decoration: none; } .split { display: flex; gap: 1.5rem; align-items: flex-start; flex-wrap: wrap; } .pane-script { flex: 1 1 20rem; } .pane-demo { flex: 2 1 28rem; min-width: 0; } .stage-cap { margin: 0 0 .5rem; min-height: 1.4rem; } .stage { height: 70vh; border: 1px solid var(--line); background: var(--surface); display: flex; align-items: center; justify-content: center; overflow: hidden; } .stage .live { width: 100%; height: 100%; border: 0; background: var(--bg); } .hint { padding: 2rem; text-align: center; opacity: .55; max-width: 32rem; } .filmstrip { align-self: stretch; flex: 1; overflow: auto; padding: 1rem; display: flex; flex-direction: column; gap: 1rem; } .frame { margin: 0; } .frame figcaption { font-size: .8rem; opacity: .55; margin-bottom: .25rem; } .frame img { width: 100%; display: block; border: 1px solid var(--line-soft); } .toggle { margin: 0 0 .9rem; } .toggle a { text-decoration: none; border: 1px solid var(--line); padding: .15rem .55rem; margin-left: .35rem; } .toggle a.on { background: var(--accent); color: var(--accent-fg); } section { margin-bottom: 1rem; } .back { opacity: .6; } .set { display: inline-block; border: 1px solid var(--line); border-radius: var(--radius); padding: .1rem .55rem; text-decoration: none; margin-left: .5rem; cursor: pointer; } .modal { position: fixed; inset: 0; background: var(--overlay); display: flex; align-items: center; justify-content: center; } .modal[hidden] { display: none; } /* S3. This sat on var(--bg) — the page ground — so the "modal" was the same colour as the thing it covered and only its accent border said otherwise. Overlays are the one level that casts. */ .settings { background: var(--raised); border: 1px solid var(--line); border-radius: var(--radius-lg, 12px); box-shadow: var(--shadow-lg); padding: 1rem 1.2rem; max-width: 30rem; width: 90%; } .settings h3 { margin: 0 0 .8rem; font-size: 1rem; } .settings fieldset { border: 1px solid var(--line-soft); border-radius: var(--radius); margin: 0 0 .9rem; padding: .5rem .8rem; } .settings legend { padding: 0 .3rem; } .opt { display: block; margin: .35rem 0; } .opt input { display: inline; width: auto; margin: 0 .45rem 0 0; } #shown { width: auto; margin: 0 0 1rem; } #shown td { border: 1px solid var(--line-soft); padding: .3rem .6rem; } .bad { color: var(--danger); } .outcome { border: 1px solid var(--line-soft); border-radius: var(--radius); padding: .4rem .7rem; max-width: 24rem; } .out-field { padding: .15rem 0; } .out-key { display: inline-block; min-width: 6rem; opacity: .55; vertical-align: top; } .out-val { font-weight: var(--weight-strong); } .out-item { border: 1px solid var(--line-faint); padding: .2rem .45rem; margin: .2rem 0 .2rem 1rem; } .hl { background: var(--hl) !important; } .chk { display: none; color: var(--ok); font-weight: bold; } .done > .chk { display: inline; } .assert { border-style: dashed !important; } .assert .etext::before, .assert .ctext::before { content: '◇ '; opacity: .7; } /* LAYOUT over slots — MOBILE-FIRST (the responsive invariant): the base is a single column at every width; a layout adds columns/sidebar only AT/ABOVE its breakpoint (min-width), never restructuring downward. The built-ins use the shared md condition (40rem); authored layouts carry their own (see responsive.js). */ .view { display: block; } /* cols — single column on mobile, two columns from md up. */ html[data-layout="cols"] [data-slot="header"] { grid-area: header; } html[data-layout="cols"] [data-slot="main"] { grid-area: main; } html[data-layout="cols"] [data-slot="aside"] { grid-area: aside; } html[data-layout="cols"] [data-slot="back"] { grid-area: back; } @media (min-width: 40rem) { html[data-layout="cols"] .view { display: grid; grid-template-columns: 14rem 1fr; grid-template-areas: "header main" "aside main" "back back"; column-gap: 1.5rem; align-items: start; } } /* APP-SHELL — the M1 chrome. MOBILE: a single column (top bar → nav → content → back), edge-to-edge. FROM md: the nav becomes a left sidebar. Slot GROUNDS (sidebar/top-bar backgrounds, padding, nav rows) apply at every width; only the grid TEMPLATE changes at the condition. The full-bleed body reset is scoped to pages that actually compose a .view (the index today) via :has — a non-slotted page keeps its normal padded body. */ html[data-layout="app-shell"] body:has(.view) { margin: 0; max-width: none; min-height: 100vh; } html[data-layout="app-shell"] .view { display: grid; grid-template-columns: 1fr; grid-template-areas: "head" "side" "main" "back"; min-height: 100vh; } html[data-layout="app-shell"] [data-slot="aside"] { grid-area: side; background: var(--sidebar-bg); color: var(--sidebar-fg); border-bottom: 1px solid var(--sidebar-line); padding: 1.1rem .8rem; } html[data-layout="app-shell"] [data-slot="header"] { grid-area: head; background: var(--topbar-bg); border-bottom: 1px solid var(--line); padding: .9rem 1.2rem; } html[data-layout="app-shell"] [data-slot="header"] h1 { margin: 0; } /* ── AF-002 / AF-008 / AF-010 — THE HEADER BAR ──────────────────────────────────────────────────── It was a title at the left and nothing else across the full width. Now: section name left, global search right, and it STAYS PUT while the page scrolls beneath it (AF-002). Sticky rather than fixed, so it keeps its place in the grid and needs no compensating offset on main. */ html[data-layout="app-shell"] [data-slot="header"] { position: sticky; top: 0; z-index: 30; } /* ── R21 · THE PHONE IS THE BASE, NOT THE EXCEPTION ─────────────────────────────────────────────── This was a one-line flex row with the search hidden below 40rem, which is 640px — so the control asserted app-wide was absent on every phone, and the rule that took it away was a max-width query: the mobile-first invariant inverted (see responsive.js). So the BASE wraps: the section name on one line, the field full width beneath it, which is what fits at 375px. The one-line row is what the md condition ADDS. */ .app-top { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem 1rem; } .app-top h1 { flex: 1 1 auto; } .app-find { position: relative; display: flex; align-items: center; flex: 1 1 100%; } /* CENTRED AGAINST THE FIELD, not against whatever the static position works out to. Jeremy, 9/24: "hourglass out of place". An absolutely positioned child takes its block-axis position from the flex container's static position, which moves with the field's padding and line-height — so the icon drifted whenever either changed. Pinned to the field's own middle instead, which cannot drift. */ .app-find-ic { position: absolute; left: .75rem; top: 50%; transform: translateY(-50%); display: flex; color: var(--fg); opacity: .45; pointer-events: none; } /* An input recedes (§2.8) — here against the header, which is the darkest surface in the app. */ .app-find input { width: 100%; margin: 0; padding: .42rem .7rem .42rem 2rem; font: inherit; font-size: var(--fs-sm); background: var(--inset); border: 1px solid var(--line); border-radius: 999px; color: var(--fg); } .app-find input::placeholder { color: var(--fg); opacity: .4; } @media (min-width: 40rem) { .app-top { flex-wrap: nowrap; } .app-find { margin-left: auto; max-width: 22rem; flex: 1 1 12rem; } } /* ── R21 · THE ANSWER, WHERE THE QUESTION WAS ASKED ─────────────────────────────────────────────── Looking somebody up used to take the page away. The answer arrives as a panel at the top of whatever section a person is on, and it is the ordinary panel treatment — a search result is not a new kind of thing. Full width at every condition: a list of names needs no column. */ .found-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem .6rem; margin: 0 0 .7rem; } .found-h h2 { margin: 0; font-size: var(--fs-lg); font-weight: 600; } .found-x { margin-left: auto; font-size: var(--fs-sm); } .found-q { overflow-wrap: anywhere; } /* ── §2.4 THE DIVIDER BAND, replacing the all-caps group label. A full-width step off the surface it sits on, label in the product font, bolded, sentence case. */ .nav-g { margin: .9rem -.8rem .35rem; padding: .3rem .8rem; background: var(--inset); font-size: var(--fs-sm); font-weight: 600; color: var(--sidebar-fg); opacity: .75; } .nav-g:first-child { margin-top: .4rem; } /* A section heading inside a page — §2.3's section token. Sentence case, weight not capitals. */ .sec-h { font-size: var(--fs-lg); font-weight: 600; margin: 1.6rem 0 .5rem; } .sec-h:first-child { margin-top: 0; } .sec-help { font-size: var(--fs-sm); color: var(--fg); opacity: .62; margin: 0 0 1rem; max-width: 46rem; } .psearch-echo { margin: 0 0 .9rem; font-size: var(--fs-sm); } /* A window onto a long list needs a handle at the bottom of it. Three columns so the position stays centred whether or not there is a page either side of it. */ .pagemore { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .75rem; margin: 1.2rem 0 0; padding-top: .9rem; border-top: 1px solid var(--line); font-size: var(--fs-sm); } .pagemore-a { text-decoration: none; border: 1px solid var(--line); border-radius: 999px; padding: .35rem .9rem; white-space: nowrap; } .pagemore-a:last-child { justify-self: end; } .pagemore-a:hover { border-color: var(--accent); } /* Narrowing and ordering read as one band of choices, so they use one chip. Wrapping, because there are seven of them and a phone is 375px. */ .plist-show, .plist-sort { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: 0 0 .6rem; } .lchip { text-decoration: none; font-size: var(--fs-sm); border: 1px solid var(--line); border-radius: 999px; padding: .25rem .75rem; color: var(--fg); } .lchip:hover { border-color: var(--accent); } .lchip.on { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); } .lchip-lbl { margin-right: .15rem; } /* ── §2.6 THE TABLE PATTERN ─────────────────────────────────────────────────────────────────────── Column heads at label weight, sentence case, a hairline beneath rather than a rule. Rows separated by hairlines, not boxed. First column is identity. Last column is the action, right-aligned. The table sits on a card (S2), never naked on the page ground. Wide content scrolls inside its own container so the page body never scrolls sideways. */ .src-tw { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg, 12px); overflow-x: auto; margin: 0 0 1.6rem; } .src-t { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); } .src-t th { text-align: left; font-size: .8rem; font-weight: 500; color: var(--fg); opacity: .45; padding: .7rem 1rem .5rem; border-bottom: 1px solid var(--line); white-space: nowrap; } .src-t td { padding: .8rem 1rem; border-bottom: 1px solid var(--line-soft); vertical-align: top; } .src-t tbody tr:last-child td { border-bottom: 0; } .src-t tbody tr:hover td { background: color-mix(in srgb, var(--fg) 4%, transparent); } .src-svc { white-space: nowrap; } .src-acct { color: var(--fg); opacity: .72; } .src-reach { color: var(--fg); opacity: .72; } .src-note { display: block; font-size: .8rem; opacity: .62; margin-top: .15rem; } .src-lapsed .src-note { color: var(--danger); opacity: 1; } .src-act { text-align: right; white-space: nowrap; } /* §2.7 — a small pill button in accent, or a ghosted pill when the action is unavailable. A disabled control does not react: hover response is itself a signal. */ .src-btn { display: inline-block; padding: .3rem .8rem; border-radius: 999px; font-size: .82rem; font-weight: 500; text-decoration: none; border: 1px solid var(--line); color: var(--fg); } .src-btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); } .src-btn.primary:hover { filter: brightness(1.08); } .src-btn.ghost { opacity: .45; cursor: default; } .src-btn.quiet { opacity: .8; } .src-btn.quiet:hover { opacity: 1; border-color: var(--accent); color: var(--accent); } /* ── §2.13 THE EMPTY STATE ────────────────────────────────────────────────────────────────────────── */ .pempty { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg, 12px); padding: 2rem 1.5rem; text-align: center; max-width: 34rem; margin: 1rem auto; } .pempty p { margin: 0 0 .7rem; } .pempty .cta-btn { margin-top: .4rem; } /* ── AF-013 THE QUICK-EDIT FLYOUT — §2.9 depth, right-anchored, S3 with a shadow over a scrim. Driven by :target, so it is a link: no script, linkable, and the back button closes it. */ .pfly { position: fixed; inset: 0; z-index: 40; display: none; background: var(--overlay); } .pfly:target { display: block; } .pfly-c { position: absolute; top: 0; right: 0; bottom: 0; width: min(92vw, 27rem); overflow-y: auto; background: var(--raised); border-left: 1px solid var(--line); box-shadow: var(--shadow-lg); padding: 1.1rem 1.2rem; display: flex; flex-direction: column; gap: .9rem; } .pfly-h { display: flex; align-items: center; gap: .6rem; } .pfly-h b { font-size: var(--fs-lg); } .pfly-x { margin-left: auto; text-decoration: none; font-size: 1.4rem; line-height: 1; color: var(--fg); opacity: .5; padding: .2rem .4rem; } .pfly-x:hover { opacity: 1; } .pfly-f label, .pfly-ro label { display: block; font-size: .8rem; opacity: .55; margin-bottom: .2rem; } .pfly-f { margin: 0; } .pfly-ro p { margin: 0; } .pfly-row { display: flex; gap: .4rem; } .pfly-row input { margin: 0; } .pfly-row button { flex: 0 0 auto; padding: .4rem .8rem; border-radius: var(--radius); border: 1px solid var(--line); background: var(--inset); color: var(--fg); font: inherit; font-size: var(--fs-sm); cursor: pointer; } .pfly-fav { margin: 0; } .pfly-star { width: 100%; padding: .45rem .8rem; border-radius: var(--radius); border: 1px solid var(--line); background: transparent; color: var(--fg); font: inherit; font-size: var(--fs-sm); cursor: pointer; text-align: left; } .pfly-star[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); } .pfly-foot { margin-top: auto; padding-top: .6rem; border-top: 1px solid var(--line-soft); } .pfly-deep { color: var(--accent); text-decoration: none; font-size: var(--fs-sm); } /* ── §10 GOAL MANAGEMENT ────────────────────────────────────────────────────────────────────────── AF-016: the Add control sits below the header, not inside it, and is the one primary per view. */ .gm-top { margin: 0 0 1.2rem; } .gm-addbtn { display: inline-block; } /* The modal is the flyout mechanism, centred rather than right-anchored — same depth, same :target. */ .gm-modal .gm-mc { right: 50%; transform: translateX(50%); top: 10vh; bottom: auto; width: min(92vw, 34rem); max-height: 80vh; border-radius: var(--radius-lg, 12px); border: 1px solid var(--line); } .gm-is { font-size: var(--fs-sm); line-height: 1.6; margin: 0; color: var(--fg); opacity: .8; } .gm-is b { opacity: 1; display: block; margin-bottom: .3rem; } .gm-mform label { display: block; font-weight: 600; margin-bottom: .2rem; } /* §2.8 — helper text BELOW the label and above the field, where it is read before answering. */ .gm-help { font-size: var(--fs-sm); opacity: .6; margin: 0 0 .5rem; line-height: 1.5; } .gm-mform textarea { width: 100%; font: inherit; padding: .55rem .65rem; border-radius: var(--radius); border: 1px solid var(--line); background: var(--inset); color: var(--fg); resize: vertical; } .gm-mform textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent); } /* §2.7 — the forward control sits bottom-right (AF-005). */ .gm-mact { display: flex; justify-content: flex-end; margin-top: .9rem; } /* AF-015 — a simple control, with no box drawn around it. */ .gm-edit { display: inline-flex; } .gm-edit .gm-ef { display: inline-flex; gap: .35rem; align-items: center; margin: 0; } /* ── §12 SETTINGS · §2.4's divider band as the accordion header ──────────────────────────────────── */ .set-sec { border: 1px solid var(--line); border-radius: var(--radius-lg, 12px); background: var(--card); margin: 0 0 .9rem; overflow: hidden; } .set-band { cursor: pointer; padding: .7rem 1rem; background: var(--inset); font-weight: 600; list-style: none; display: flex; align-items: center; gap: .5rem; } .set-band::-webkit-details-marker { display: none; } .set-band::before { content: "›"; display: inline-block; transition: transform 140ms ease-out; opacity: .5; } .set-sec[open] .set-band::before { transform: rotate(90deg); } .set-body { padding: 1rem; } .set-body > p:last-child { margin-bottom: 0; } /* A ROW THAT SHOWS RATHER THAN ADJUSTS — AF-023. The value sits where a control used to, so the shape of the page is unchanged and only its affordance is. */ .set-row { padding: .7rem 0; border-top: 1px solid var(--line-soft); } .set-row:first-of-type { border-top: 0; padding-top: 0; } .set-rh { display: flex; gap: 1rem; align-items: baseline; flex-wrap: wrap; } .set-val { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--fg); opacity: .8; } .set-note { font-size: var(--fs-sm); margin: .25rem 0 0; } .set-pending { font-style: italic; opacity: .55; } /* R13 · WHICH ACCOUNT YOU ARE SIGNED INTO — see accountBody. Rows, key beside value, because two names for one account have to be read together and pointed at. */ .acct { max-width: 44rem; } .acct-id { border: 1px solid var(--line); border-radius: var(--radius-lg, 12px); background: var(--card); padding: 1rem 1.1rem; } .acct-row { display: flex; gap: 1rem; align-items: baseline; flex-wrap: wrap; padding: .55rem 0; border-top: 1px solid var(--line-soft); } .acct-row:first-child { border-top: 0; padding-top: 0; } .acct-k { color: var(--fg); opacity: .6; font-size: var(--fs-sm); } .acct-v { margin-left: auto; word-break: break-all; } .acct-none { font-style: italic; opacity: .55; font-weight: 400; } .acct-support { border: 1px solid var(--line); border-radius: var(--radius-lg, 12px); background: var(--card); padding: 1rem 1.1rem; margin: .9rem 0 0; } .acct-doors { display: flex; gap: .6rem; flex-wrap: wrap; margin: .7rem 0 0; } /* ── AF-007 · THE LOGO ──────────────────────────────────────────────────────────────────────────── A mask over currentColor: one asset, either ground, and it takes the colour of the text around it. */ /* ── §5 ONBOARDING · A QUESTION ON A CARD (§2.9 depth), the forward control bottom-right (AF-005) */ .walk-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg, 12px); box-shadow: var(--shadow-lg); padding: 1.6rem 1.5rem; max-width: 34rem; margin: 0 auto; } .walk-lede { color: var(--fg); opacity: .75; line-height: 1.6; margin: 0 0 1.1rem; } .walk-label { display: block; font-weight: 600; margin: 0 0 .2rem; } .walk-hint { font-size: var(--fs-sm); opacity: .6; margin: 0 0 .5rem; line-height: 1.5; } .walk-act { display: flex; justify-content: flex-end; margin-top: 1rem; } /* AF-C06 — a suggestion is a control, not an example to retype. */ .walk-suggests { display: flex; flex-direction: column; gap: .4rem; margin: .6rem 0 0; } .walk-suggest { text-align: left; font: inherit; font-size: var(--fs-sm); cursor: pointer; padding: .5rem .7rem; border-radius: var(--radius); border: 1px solid var(--line); background: var(--inset); color: var(--fg); } .walk-suggest:hover { border-color: var(--accent); color: var(--accent); } /* ── R26 · ONE FRAME FOR THE WHOLE SEQUENCE ─────────────────────────────────────────────────────── Measured at 375 by 812 before this: the card was vertically centred and every step was a different height, so its top edge climbed 296, 235, 172 across the last three transitions and the question, the field and the forward control landed somewhere new on each screen. Two rules end that. The main row takes the leftover space, so the card's top edge is set by the header above it rather than by how tall the card happens to be. And the card carries a declared height, so the forward control and the dots stay where they were. The answer region is the only part that changes size, and it is the part that scrolls when a step carries more than the frame holds. */ /* The three reserved sizes, named once. The frame is as tall as the screen allows, up to a cap, so it is the same on every step of the sequence without being taller than the device it is read on; the heading holds two lines, which is the longest question in the sequence; the action row holds the forward control, so the dots do not move on the one step that offers none. */ html[data-view^="onboard/"] { --walk-frame: 40rem; --walk-head-h: 2.2em; --walk-act-h: 2.6rem; } /* THE SCREEN IS THE SCREEN. min-height leaves the height indefinite, so a 1fr row is sized by its content: the one step carrying more than the frame holds grew the row, and the frame grew with it — measured as a 130px difference at 390 by 667. A definite height plus minmax(0, 1fr) means the row cannot be pushed out by what is in it, and the answer region takes the overflow. */ html[data-view^="onboard/"] .view { height: 100vh; grid-template-rows: auto auto minmax(0, 1fr) auto; } html[data-view^="onboard/"] [data-slot="main"] { display: flex; flex-direction: column; min-height: 0; } html[data-view^="onboard/"] .walk { flex: 1 1 auto; min-height: 0; width: 100%; display: flex; flex-direction: column; align-items: center; } html[data-view^="onboard/"] .walk-card { flex: 1 1 auto; min-height: 0; max-height: var(--walk-frame); width: 100%; display: flex; flex-direction: column; } html[data-view^="onboard/"] .walk-h { min-height: var(--walk-head-h); margin: 0 0 1rem; } html[data-view^="onboard/"] .walk-ask { flex: 1 1 auto; min-height: 0; overflow-y: auto; } html[data-view^="onboard/"] .walk-ask > .walk-form { margin: 0; } /* F109 · THERE IS MORE BELOW. Stuck to the scrollport while content is under it, in its own place once there is not — so the fade shows exactly while there is something to reach. Reasoning and measurements: studio/a-scrolling-answer-says-there-is-more.test.js (this comment ships on every page — F110). */ html[data-view^="onboard/"] .walk-more { position: sticky; bottom: 0; height: 1.6rem; background: linear-gradient(to top, var(--card), transparent); pointer-events: none; } /* The heading asks the question; this names the field for anybody who cannot see the heading. */ html[data-view^="onboard/"] .walk-label { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } html[data-view^="onboard/"] .walk-act { flex: none; align-items: center; gap: 1rem; min-height: var(--walk-act-h); margin: 1rem 0 0; } /* The connect step goes forward with a link and the rest with a submit button. Without this the link is 2px shorter than the button and sits 2px lower in the row. */ html[data-view^="onboard/"] .walk-act .walk-next { border-style: solid; border-width: 1px; } html[data-view^="onboard/"] .walk-instead { margin: 0 auto 0 0; font-size: var(--fs-sm); max-width: none; } html[data-view^="onboard/"] .walk-back { margin-right: auto; } html[data-view^="onboard/"] .walk-dots { flex: none; margin: 1.2rem 0 0; } @media (min-width: 40rem) { /* Three rows from here up: the reserved sidebar column collapses on a screen that has no sidebar. */ html[data-view^="onboard/"] .view { grid-template-rows: auto minmax(0, 1fr) auto; } } /* ── R26 · AND ONLY THEN, MOTION ─────────────────────────────────────────────────────────────────── Second, not first: a transition on a layout that moves makes the moving worse, which is why the frame was fixed before anything was animated. The document already cross-fades between pages, and it already stops doing so under reduced motion. What this adds is WHICH PARTS cross-fade — the question and the answer region change, and the frame, the forward control and the dots are named so they hold still across the change rather than being repainted with everything else. Guarded by no-preference as well, so nothing here is even declared for somebody who asked for less. */ @media (prefers-reduced-motion: no-preference) { html[data-view^="onboard/"] .walk-card { view-transition-name: walk-frame; } html[data-view^="onboard/"] .walk-h { view-transition-name: walk-question; } html[data-view^="onboard/"] .walk-ask { view-transition-name: walk-answer; } html[data-view^="onboard/"] .walk-act { view-transition-name: walk-forward; } html[data-view^="onboard/"] .walk-dots { view-transition-name: walk-progress; } /* Named groups, so no page but this one can be reached by them. */ ::view-transition-group(walk-question), ::view-transition-group(walk-answer) { animation-duration: 240ms; } ::view-transition-group(walk-frame), ::view-transition-group(walk-forward) { animation-duration: 0s; } } /* THE MARK AT HEADER SIZE. The sidebar's is 148×47; a header line is type-height, so the same asset is drawn to match the text beside it rather than dwarfing it. One asset, two sizes, no second file. */ .jbrand .brand-logo, .brand-logo.sm { width: 27px; height: 26px; color: var(--fg); } .jbrand .brand-word { font-size: 1.05rem; color: var(--fg); } /* The mode a person is in, said on the control that switches it. Quiet: it is a state, not a warning. */ .usr-mode { font-size: var(--fs-xs, .72rem); letter-spacing: .04em; text-transform: uppercase; padding: .1rem .4rem; border: 1px solid var(--line); border-radius: var(--radius); color: var(--soft); } /* ── THE MARK IS THE MARK; THE BOX AROUND IT IS NOT PART OF IT ────────────────────────────────────── * * This masked feather-logo.svg — which holds the SAME TEN PATHS as feather-mark.svg and differs only in * viewBox, 595.28 wide against 195. So contain fitted a box three times too wide, the mark landed at a * third of the space, and the rest was nothing. That is why the sidebar brand read small and adrift. * * There is no text treatment in the repository — the wordmark was lost whenever these files were made — * so the mark stands at its own proportions and the word is set in type beside it. brand-word is where a * real wordmark lands when one arrives, spaced independently, so the two can be arranged together * without either being baked into the other's artwork. */ .brand { display: inline-flex; align-items: center; gap: .55rem; } .brand-logo { display: block; width: 42px; height: 41px; background: currentColor; color: var(--sidebar-fg); -webkit-mask: url(/assets/feather-mark.svg) no-repeat center / contain; mask: url(/assets/feather-mark.svg) no-repeat center / contain; } .brand-word { font-size: 1.28rem; font-weight: 600; letter-spacing: -.01em; color: var(--sidebar-fg); } html[data-layout="app-shell"] [data-slot="main"] { grid-area: main; padding: 1.3rem; } html[data-layout="app-shell"] [data-slot="back"] { grid-area: back; padding: .6rem 1.3rem; } /* Nav reads as a vertical list of quiet rows; the active/hover row picks up the M1 turquoise. */ html[data-layout="app-shell"] [data-slot="aside"] .links { display: flex; flex-direction: column; gap: .15rem; } html[data-layout="app-shell"] [data-slot="aside"] .links li { padding: 0; } html[data-layout="app-shell"] [data-slot="aside"] .links a { display: block; padding: .55rem .6rem; border-radius: var(--radius); text-decoration: none; color: var(--sidebar-fg); font-size: var(--fs-sm); } html[data-layout="app-shell"] [data-slot="aside"] .links a:hover { background: var(--fill); color: var(--accent-2); } @media (min-width: 40rem) { html[data-layout="app-shell"] .view { grid-template-columns: 15rem 1fr; grid-template-areas: "side head" "side main" "side back"; grid-template-rows: auto 1fr auto; column-gap: 0; } /* SCROLL SEPARATION — for app sections (a view WITH a sidebar), pin the shell to the viewport so the sidebar and top bar stay put and only the main pane scrolls. Orientation pages (no aside) keep normal document flow. */ html[data-layout="app-shell"] body:has(.view [data-slot="aside"]) { height: 100vh; overflow: hidden; } html[data-layout="app-shell"] .view:has([data-slot="aside"]) { height: 100vh; grid-template-rows: auto 1fr auto; } html[data-layout="app-shell"] .view:has([data-slot="aside"]) [data-slot="aside"] { height: 100vh; overflow-y: auto; } html[data-layout="app-shell"] .view:has([data-slot="aside"]) [data-slot="main"] { overflow-y: auto; min-height: 0; } /* Orientation pages (walk / onboard / auth) carry no sidebar — collapse the reserved column so they center. */ html[data-layout="app-shell"] .view:not(:has([data-slot="aside"])) { grid-template-columns: 1fr; grid-template-areas: "head" "main" "back"; } html[data-layout="app-shell"] .view:not(:has([data-slot="aside"])) [data-slot="main"] { max-width: 62rem; margin: 0 auto; width: 100%; } html[data-layout="app-shell"] [data-slot="aside"] { border-bottom: 0; border-right: 1px solid var(--sidebar-line); } html[data-layout="app-shell"] [data-slot="header"] { padding: .9rem 1.6rem; } html[data-layout="app-shell"] [data-slot="main"] { padding: 1.6rem; } html[data-layout="app-shell"] [data-slot="back"] { padding: .6rem 1.6rem; } } /* FLOW-AS-EXPERIENCE — the journey. Top bar = brand + flow; sidebar = the progress path; main = the step. */ .jbrand { font-size: var(--fs-lg); } .jprog { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .1rem; } .jprog li { display: flex; align-items: center; gap: .5rem; padding: .4rem .5rem; border-radius: var(--radius); font-size: var(--fs-sm); color: var(--sidebar-fg); } .jprog .jdot { display: inline-flex; align-items: center; justify-content: center; width: 1.4rem; height: 1.4rem; border-radius: 50%; border: 1px solid var(--sidebar-line); font-size: .72rem; flex: 0 0 auto; } .jprog li.cur { background: var(--fill); font-weight: var(--weight-strong); } .jprog li.cur .jdot { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); } .jprog li.done { opacity: .75; } .jprog li.done .jdot { color: var(--accent-2); border-color: var(--accent-2); } .jprog li.up { opacity: .5; } .jchoice, .jstep, .jdone { max-width: 34rem; } .jchoice > h1, .jstep > h1, .jdone > h1 { margin-top: 0; } .jchoose { display: flex; flex-direction: column; gap: .5rem; max-width: 30rem; } .jopt { display: flex; gap: .6rem; align-items: flex-start; border: 1px solid var(--line); border-radius: var(--radius); padding: .7rem .8rem; cursor: pointer; } .jopt:has(input:checked) { border-color: var(--accent); background: var(--fill); box-shadow: 0 0 0 1px var(--accent); } .jopt input { margin-top: .25rem; flex: 0 0 auto; width: auto; } .jopt-x { display: flex; flex-direction: column; gap: .12rem; } /* --fs-md is declared nowhere, so this rule dropped in silence and the text took its inherited size. The scale runs --fs-sm · --fs · --fs-lg · --fs-xl; there is no md. Asking for one that exists. */ .jopt-x b { font-size: var(--fs-lg); } .jopt-s { font-size: var(--fs-sm); color: var(--soft); } .jopt-g { font-size: .74rem; color: var(--faint); font-family: var(--mono); } .srcmenu { display: flex; flex-direction: column; gap: .5rem; max-width: 30rem; margin: .4rem 0; } .srcpick { display: flex; flex-direction: column; gap: .1rem; border: 1px solid var(--line); border-radius: var(--radius); padding: .7rem .8rem; text-decoration: none; color: inherit; } .srcpick.on { border-color: var(--accent); background: var(--fill); } .srcpick > span, .srcpick span span { font-size: var(--fs-sm); color: var(--soft); display: block; } .srcpick.soon { opacity: .6; flex-direction: row; justify-content: space-between; align-items: center; } .srcpick.soon em { font-size: .66rem; text-transform: uppercase; letter-spacing: .06em; font-style: normal; border: 1px solid var(--line); border-radius: 1rem; padding: .12rem .55rem; color: var(--faint); white-space: nowrap; } .srcpriv { font-size: .74rem; margin-top: .5rem; } .dash { max-width: 62rem; } .dash-title { margin: 0 0 1.1rem; } .story-ribbon { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; margin: 0 0 1.4rem; padding: .7rem .9rem; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 12%, transparent), transparent 65%); } .story-ribbon-av { width: 40px; height: 40px; border-radius: 50%; background-size: cover; background-position: center; background-color: var(--fill); box-shadow: 0 0 0 1px var(--line); flex: none; } .story-ribbon-txt { flex: 1 1 16rem; font-size: var(--fs-sm); line-height: 1.5; } .story-ribbon-cta { text-decoration: none; padding: .5rem 1.1rem; border-radius: var(--radius); white-space: nowrap; } /* STORY WALK — the persona's dot-paginated orientation (goal → connect → operational panel). */ .walk-brand { display: flex; justify-content: space-between; align-items: center; gap: 1rem; } .walk-who { display: flex; align-items: center; gap: .6rem; } .walk-who-av { width: 34px; height: 34px; border-radius: 50%; background-size: cover; background-position: center; background-color: var(--fill); box-shadow: 0 0 0 1px var(--line); flex: none; } .walk-who span span { display: block; } .walk-who .soft { font-size: .72rem; } .walk-leave { color: var(--soft); text-decoration: none; font-size: var(--fs-sm); white-space: nowrap; } .walk { max-width: 44rem; margin: 0 auto; padding: clamp(1rem, 5vh, 3rem) 0 1rem; } .walk-app { max-width: 62rem; } .walk-eye { font-size: .74rem; color: var(--accent); margin: 0 0 .7rem; } .walk-h { font-size: clamp(1.7rem, 4vw, 2.6rem); letter-spacing: -.03em; line-height: 1.06; margin: 0 0 1.2rem; } .walk-answer { font-size: clamp(1.5rem, 4vw, 2.2rem); font-weight: var(--weight-strong); color: var(--accent-2); background: color-mix(in srgb, var(--accent) 10%, transparent); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.1rem 1.3rem; letter-spacing: -.02em; } .walk-caret { display: inline-block; width: 2px; height: 1.1em; background: var(--accent-2); margin-left: 3px; vertical-align: -.15em; animation: walkblink 1.1s step-end infinite; } @keyframes walkblink { 50% { opacity: 0; } } @media (prefers-reduced-motion: reduce) { .walk-caret { animation: none; } } .walk-cap { color: var(--soft); font-size: 1.05rem; line-height: 1.6; max-width: 40ch; margin: 1.3rem 0 0; } .walk-source { display: flex; align-items: center; gap: .9rem; padding: 1rem 1.2rem; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); } .walk-source-ic { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 10px; background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); font-weight: var(--weight-strong); font-size: .7rem; flex: none; } .walk-source-t { display: flex; flex-direction: column; gap: .15rem; flex: 1; } .walk-source-t .soft { font-size: .84rem; } .walk-source-ok { color: var(--ok, #3fb950); font-size: 1.2rem; font-weight: 700; } .walk-nav { display: flex; align-items: center; gap: 1.1rem; margin: 1.8rem 0 0; } .walk-next { text-decoration: none; padding: .7rem 1.5rem; border-radius: var(--radius); font-size: 1.02rem; } .walk-back { color: var(--soft); text-decoration: none; font-size: .92rem; } .walk-convert { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin: 1.6rem 0 0; padding: 1rem 1.2rem; border: 1px solid var(--line); border-radius: var(--radius-lg); background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 12%, transparent), transparent 70%); } .walk-convert .btn-accent { text-decoration: none; padding: .6rem 1.3rem; border-radius: var(--radius); white-space: nowrap; } .walk-dots { display: flex; gap: .5rem; justify-content: center; margin: 2.2rem 0 0; } .walk-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--line); transition: background .2s, transform .2s; } .walk-dot.done { background: color-mix(in srgb, var(--accent) 55%, var(--line)); } .walk-dot.on { background: var(--accent); transform: scale(1.35); } .walk-sub { font-size: 1.05rem; line-height: 1.6; max-width: 42ch; margin: 0 0 1.6rem; } .walk-auth { max-width: 26rem; } .walk-auth .msg { margin: 0 0 1rem; } .authform { display: flex; flex-direction: column; gap: .9rem; } .authform label { display: flex; flex-direction: column; gap: .3rem; font-size: .8rem; color: var(--soft); font-weight: var(--weight-strong); } .authform input { font-size: 1rem; color: var(--fg); background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: .7rem .9rem; } .authform input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent); } .authform .walk-next { align-self: flex-start; margin-top: .3rem; text-decoration: none; padding: .7rem 1.5rem; border-radius: var(--radius); border: 0; cursor: pointer; font-size: 1rem; } .walk-alt { margin: 1.3rem 0 0; font-size: .9rem; } /* The real goal-setter — a big, calm input echoing the story's answer panel. */ .walk-form { display: flex; flex-direction: column; gap: .8rem; max-width: 32rem; } .walk-input { font-size: clamp(1.2rem, 3vw, 1.6rem); font-weight: var(--weight-strong); color: var(--fg); background: color-mix(in srgb, var(--accent) 8%, transparent); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1rem 1.2rem; letter-spacing: -.01em; width: 100%; } .walk-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); } .walk-input::placeholder { color: var(--faint); font-weight: 400; } .walk-form .walk-next { align-self: flex-start; text-decoration: none; padding: .7rem 1.5rem; border-radius: var(--radius); border: 0; cursor: pointer; font-size: 1.02rem; } /* Source cards for the connect step. */ .osrcs { display: flex; flex-direction: column; gap: .7rem; max-width: 34rem; margin: 0 0 .4rem; } .osrc { display: flex; align-items: center; gap: .9rem; width: 100%; text-align: left; padding: .9rem 1.1rem; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); cursor: pointer; color: inherit; transition: border-color .15s, transform .15s; } .osrc:hover:not(.soon) { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); transform: translateY(-2px); } .osrc.soon { opacity: .5; cursor: default; } .osrc-ic { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); font-weight: 700; flex: none; } .osrc-t { display: flex; flex-direction: column; gap: .1rem; flex: 1; } .osrc-t .soft { font-size: .8rem; } .osrc-go { color: var(--accent); font-weight: var(--weight-strong); font-size: .9rem; } .osrc.soon em { font-size: .66rem; text-transform: uppercase; letter-spacing: .06em; font-style: normal; color: var(--faint); border: 1px solid var(--line); border-radius: 1rem; padding: .1rem .55rem; } /* Polished nudge cards — the move IS the object; the person links into their contact. */ .nudges { display: flex; flex-direction: column; gap: .7rem; } .nudge { padding: .85rem 1rem; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); } .nudge-h { display: flex; align-items: center; gap: .55rem; margin-bottom: .4rem; flex-wrap: wrap; } .nudge-goal { font-size: .78rem; color: var(--soft); font-style: italic; } .nudge-who { font-weight: var(--weight-strong); text-decoration: none; color: var(--fg); } .nudge-who:hover { color: var(--accent); } .nudge-why { font-size: .88rem; line-height: 1.5; color: var(--soft); margin: 0 0 .3rem; } .nudge-src { font-size: .72rem; color: var(--faint); margin: 0; } .nudge-do { display: flex; flex-wrap: wrap; gap: .35rem; margin: .6rem 0 0; } .nudge-do-f { margin: 0; } .nudge-do-b { cursor: pointer; font: inherit; font-size: .74rem; padding: .3rem .7rem; border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: var(--soft); } .nudge-do-b:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); color: var(--fg); } .nudge-acted { font-size: .78rem; font-weight: var(--weight-strong); color: var(--accent); margin: .6rem 0 0; } /* THE APP SHELL — sidebar nav, summary stat cards, funnel, people rows, section panels. */ /* ── ON A PHONE THE NAVIGATION IS A STRIP, NOT A COLUMN ──────────────────────────── Measured at 375×812: header 123, sidebar 519, so the product began at y=642 — four-fifths of a screen of navigation before anything a person came for, on every section. A column is a shape that needs width it does not have here. The group headings go, because "Explore" and "Manage" organise a vertical list and say nothing in a row. They come back with the column. Nothing is removed from the navigation: every destination is still here, in the same order, and the strip scrolls if it must. */ /* min-width: 0 IS LOad-BEARING, twice. A grid item defaults to min-width: auto, which means it refuses to be narrower than its content — so a row of nowrap links pushed the sidebar to 844px inside a 375px viewport and the whole page scrolled sideways. overflow-x on the strip cannot save it while an ancestor is free to grow; the column has to be told it may be narrow first. */ html[data-layout="app-shell"] [data-slot="aside"] { min-width: 0; } .side { display: flex; flex-direction: row; align-items: center; height: auto; gap: .4rem; min-width: 0; } .side-brand { display: flex; align-items: center; gap: .6rem; padding: 0 .2rem 0 0; flex: none; } .side-av { width: 34px; height: 34px; border-radius: 50%; background-size: cover; background-position: center; background-color: var(--fill); box-shadow: 0 0 0 1px var(--sidebar-line); flex: none; } .side-bt { display: flex; flex-direction: column; line-height: 1.2; } .side-bt .soft { font-size: .68rem; } /* nowrap IS THE WHOLE POINT. A generic .nav earlier in this sheet sets flex-wrap: wrap, so without this the strip silently became three stacked rows — 154px of it — and looked like it had not worked. It scrolls sideways instead. */ .nav { display: flex; flex-direction: row; flex-wrap: nowrap; gap: .25rem; flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; } .nav::-webkit-scrollbar { display: none; } .side .nav-g { display: none; } .nav-i { display: flex; align-items: center; gap: .6rem; padding: .45rem .6rem; border-radius: var(--radius); text-decoration: none; color: var(--sidebar-fg); font-size: var(--fs-sm); font-weight: var(--weight-strong); white-space: nowrap; } .nav-i .nav-ic { display: inline-flex; opacity: .8; } .nav-i:hover { background: var(--fill); color: var(--accent-2); } .nav-i.on { background: color-mix(in srgb, var(--accent) 20%, transparent); color: var(--accent-2); } .side-foot { margin-top: 0; flex: none; } /* The rule beneath the account row separates it from a column of links. In a strip it is beside them, so the line would be drawn across nothing. */ .usr { border-top: 0; padding-top: 0; } /* ── AND FROM 40rem THE COLUMN COMES BACK ──────────────────────────────────── IMMEDIATELY AFTER THE BASE, not in the app-shell media block a hundred lines above. These selectors carry the same specificity as the base ones, so the later rule wins and a media query does not change that — written up there, the column silently never came back and the desktop kept the strip (measured: nav 35px tall, group headings still display:none at 1200px). Everything the strip set aside is restored together: a column and a strip are two settings of one thing, and splitting them across the file is how they drift apart. */ @media (min-width: 40rem) { .side { flex-direction: column; align-items: stretch; height: 100%; gap: 1rem; } .side-brand { padding: .2rem .3rem .6rem; } .nav { flex-direction: column; flex-wrap: nowrap; gap: .15rem; overflow-x: visible; } .side .nav-g { display: block; } .nav-i { padding: .55rem .65rem; } .side-foot { margin-top: auto; } .usr { border-top: 1px solid var(--sidebar-line); padding-top: .5rem; } } .usr > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: .55rem; padding: .4rem .3rem; border-radius: var(--radius); color: var(--sidebar-fg); } .usr > summary::-webkit-details-marker { display: none; } .usr > summary:hover { background: var(--fill-1, rgba(127,127,127,.1)); } .usr-who { flex: 1; font-size: var(--fs-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .usr-caret { font-size: .7rem; opacity: .6; transition: transform .15s ease; } .usr[open] .usr-caret { transform: rotate(180deg); } /* IT FLOATS, rather than expanding inline. * * Opening it used to push the sidebar's own layout around — the menu took space, everything above it * moved, and the thing you were aiming at was no longer where you clicked. A menu is an overlay: it * appears over what is there and takes nothing away. * * UPWARD, because it sits on the floor of the sidebar. Opening downward would put it off the screen. */ .usr { position: relative; } /* R17 · A PLATE ORIENTS, AN ITEM ACTS — see VERSION_PLATE. Quieter than the items and set below them, because this one is a label; still a link where a supporter has a changelog to reach. */ .usr-plate { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; padding: .45rem .6rem .2rem; margin-top: .15rem; font-size: .74rem; color: var(--soft); border-top: 1px solid var(--line); cursor: default; text-decoration: none; } .usr-plate[href] { cursor: pointer; } .usr-plate[href]:hover { color: var(--accent); } /* R18 · WHICH COPY OF THE PRODUCT THIS IS, AS A BADGE — see VERSION_PLATE. It was a parenthesis inside the version line; the mode badge and a placement's chips were already this shape. */ .usr-env { font-size: .64rem; letter-spacing: .04em; text-transform: uppercase; border: 1px solid var(--line); border-radius: 999px; padding: 0 .4rem; opacity: .85; } .usr-tag { font-size: .66rem; border: 1px solid var(--line); border-radius: 999px; padding: 0 .4rem; margin-left: .35rem; } .ch-list { list-style: none; padding: 0; margin: 1rem 0 0; } .ch-row { display: flex; align-items: baseline; gap: .6rem; padding: .5rem 0; border-bottom: 1px solid var(--line); } .ch-what { font-weight: 600; } .ch-tag { font-size: .7rem; border: 1px solid var(--line); border-radius: 999px; padding: 0 .45rem; } .ch-unverified { opacity: .75; } .usr-menu { position: absolute; bottom: calc(100% + .4rem); left: 0; right: 0; display: flex; flex-direction: column; gap: .3rem; background: var(--sidebar-bg, var(--bg)); border: 1px solid var(--sidebar-line); border-radius: var(--radius); padding: .35rem; box-shadow: 0 8px 24px rgba(0,0,0,.35); z-index: 40; } .usr-item { display: block; width: 100%; text-align: left; background: none; border: 0; border-radius: var(--radius); padding: .45rem .6rem; color: var(--sidebar-fg); cursor: pointer; font-size: var(--fs-sm); text-decoration: none; } .usr-item:hover { background: var(--fill-1, rgba(127,127,127,.12)); color: var(--accent); } @media (prefers-reduced-motion: reduce) { .usr-caret { transition: none; } } .side-convert { display: flex; flex-direction: column; gap: .35rem; padding: .8rem; border: 1px solid var(--sidebar-line); border-radius: var(--radius); } .side-convert .soft { font-size: .74rem; line-height: 1.4; } .side-convert .btn-accent { text-align: center; text-decoration: none; padding: .5rem; border-radius: var(--radius); margin-top: .2rem; } .side-leave { color: var(--sidebar-fg); opacity: .7; text-decoration: none; font-size: .74rem; text-align: center; } .app-top h1 { margin: 0; font-size: 1.3rem; } .stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: .8rem; margin: 0 0 1.1rem; } @media (min-width: 720px) { .stats { grid-template-columns: repeat(4, 1fr); } } .stat { display: flex; flex-direction: column; gap: .15rem; padding: .9rem 1rem; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); } .stat-ic { color: var(--accent); opacity: .85; } .stat-n { font-size: 1.7rem; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; } .stat-l { font-size: .72rem; color: var(--soft); } .appgrid { display: grid; grid-template-columns: 1fr; gap: 1rem; align-items: start; } @media (min-width: 860px) { .appgrid { grid-template-columns: 1fr 1fr; } .appgrid .panel-wide { grid-column: 1 / -1; } } .panel { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.1rem 1.2rem; box-shadow: var(--shadow); } /* ENTRY — stats, panels and rows ease in on arrival (suspense) rather than snapping into place. */ @keyframes app-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } .stat, .appgrid > .panel { animation: app-rise .5s cubic-bezier(.2,.7,.2,1) both; } .stat:nth-child(2) { animation-delay: .05s; } .stat:nth-child(3) { animation-delay: .1s; } .stat:nth-child(4) { animation-delay: .15s; } .appgrid > .panel:nth-child(2) { animation-delay: .09s; } .appgrid > .panel:nth-child(3) { animation-delay: .18s; } .appgrid > .panel:nth-child(4) { animation-delay: .27s; } .prow, .ptile { animation: app-rise .45s ease both; } .plist .prow:nth-child(2) { animation-delay: .04s; } .plist .prow:nth-child(3) { animation-delay: .08s; } .plist .prow:nth-child(4) { animation-delay: .12s; } .plist .prow:nth-child(5) { animation-delay: .16s; } .plist .prow:nth-child(6) { animation-delay: .2s; } @media (prefers-reduced-motion: reduce) { .stat, .appgrid > .panel, .prow, .ptile { animation: none; } } .panel h2 { margin: 0 0 .8rem; font-size: 1rem; } .panel-h { display: flex; justify-content: space-between; align-items: baseline; } .panel-more { font-size: .82rem; text-decoration: none; color: var(--accent); } .fnl { display: flex; flex-direction: column; gap: .6rem; margin-top: .3rem; } .fnl-row { display: grid; grid-template-columns: 5.5rem 1fr 3rem; align-items: center; gap: .7rem; } .fnl-l { font-size: .82rem; color: var(--soft); } .fnl-n { font-variant-numeric: tabular-nums; font-weight: 700; text-align: right; } .fnl-track { height: 10px; background: var(--fill); border-radius: 6px; overflow: hidden; } /* NO GRADIENT. Andrew's §2.2: the brightest object on the dashboard was a blue→green gradient on progress bars nobody clicks, while the genuinely interactive things read as inert. Accent means you can act on this — so a meter, which reports rather than invites, takes accent at reduced strength and nothing more. */ .fnl-bar { display: block; height: 100%; border-radius: 6px; background: color-mix(in srgb, var(--accent) 55%, transparent); } .plist { display: flex; flex-direction: column; } .prow { display: flex; justify-content: space-between; align-items: center; gap: .8rem; padding: .6rem .3rem; border-bottom: 1px solid var(--line-soft); text-decoration: none; color: inherit; } .prow:last-child { border-bottom: 0; } .prow:hover { background: var(--fill); } .prow-l { display: flex; flex-direction: column; gap: .1rem; min-width: 0; flex: 1; } .prow-l .soft { font-size: .76rem; } /* Avatar — real photo, else a gsuite-style initials disc colored by name. */ .pav { display: inline-flex; align-items: center; justify-content: center; flex: none; border-radius: 50%; background-size: cover; background-position: center; background-color: var(--fill); box-shadow: 0 0 0 1px var(--line); overflow: hidden; } .pav-i { color: hsl(var(--pav-h, 238) 34% 80%); background: hsl(var(--pav-h, 238) 20% 27%); font-weight: 700; letter-spacing: .01em; box-shadow: none; } .cd-head { display: flex; align-items: center; gap: .9rem; margin-bottom: .3rem; } .cd-head .cd-id { margin: 0 0 .1rem; } .cd-head .cd-name { margin: 0 0 .15rem; } .psearch { display: flex; gap: .5rem; margin: 0 0 1rem; } .psearch input { flex: 1; padding: .55rem .8rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); color: var(--fg); font-size: var(--fs-sm); } .psearch button { padding: .55rem 1.1rem; border: 0; border-radius: var(--radius); background: var(--accent); color: #fff; cursor: pointer; font-size: var(--fs-sm); } .listcount { font-size: .82rem; color: var(--soft); margin: 0 0 .6rem; } .pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .7rem; } .ptile { display: flex; flex-direction: column; align-items: flex-start; gap: .4rem; padding: 1rem; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--card); text-decoration: none; color: inherit; transition: transform .15s, border-color .15s; } .ptile:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); } .ptile-name { font-weight: var(--weight-strong); font-size: .95rem; line-height: 1.2; } .ptile-sub { font-size: .74rem; } .pv-radio { position: absolute; width: 0; height: 0; opacity: 0; pointer-events: none; } .pbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 0 0 .7rem; flex-wrap: wrap; } .pbar .listcount { margin: 0; } .pviews { display: inline-flex; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; } .pv-tab { cursor: pointer; padding: .35rem .8rem; font-size: .8rem; color: var(--soft); user-select: none; } .pv-tab + .pv-tab { border-left: 1px solid var(--line); } #pv-tiles:checked ~ .pbar label[for="pv-tiles"], #pv-table:checked ~ .pbar label[for="pv-table"] { background: var(--accent); color: #fff; } #pv-table:checked ~ .pgrid { display: none; } #pv-tiles:checked ~ .ptable { display: none; } .ptable { width: 100%; border-collapse: collapse; font-size: .85rem; } .ptable th { text-align: left; font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; color: var(--faint); font-weight: 600; padding: .5rem .6rem; border-bottom: 1px solid var(--line); } .ptable td { padding: .5rem .6rem; border-bottom: 1px solid var(--line-soft); } .pt-name a { display: inline-flex; align-items: center; gap: .5rem; text-decoration: none; color: inherit; font-weight: var(--weight-strong); } .ptable tr:hover td { background: var(--fill); } .gpills { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 .8rem; } .gpill { text-decoration: none; font-size: .8rem; color: var(--soft); border: 1px solid var(--line); border-radius: 999px; padding: .3rem .8rem; white-space: nowrap; } .gpill:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); color: var(--fg); } .gpill.on { background: var(--accent); color: #fff; border-color: var(--accent); } .ptile-chips { display: flex; gap: .3rem; flex-wrap: wrap; align-items: center; margin-top: auto; } .gfit { font-size: .68rem; font-weight: var(--weight-strong); padding: .12rem .45rem; border-radius: 5px; } .gfit-likely { color: #fff; background: var(--accent); } .gfit-maybe { color: var(--fg); background: color-mix(in srgb, var(--accent) 18%, transparent); } .gfit-unlikely { color: var(--soft); background: var(--fill); } .dupes { border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line)); border-radius: var(--radius-lg); background: color-mix(in srgb, var(--accent) 5%, transparent); padding: .8rem 1rem; margin: 0 0 1rem; } .dupes-h { display: flex; gap: .6rem; align-items: baseline; flex-wrap: wrap; margin-bottom: .3rem; } .dupe { display: flex; align-items: center; gap: .8rem; padding: .45rem 0; border-top: 1px solid var(--line-soft); flex-wrap: wrap; } .dupe-name { font-weight: var(--weight-strong); } .dupe-ids { font-size: .74rem; } .dupe-f { margin: 0 0 0 auto; } .dupe-merge { cursor: pointer; font: inherit; font-size: .76rem; padding: .3rem .9rem; border: 0; border-radius: 999px; background: var(--accent); color: #fff; } /* R22 - WHO ARRIVED SINCE YOU LAST LOOKED. One column at 375px, wrapping into rows from 30rem up: min-width only, so the phone is the base and the wider screen is the exception. */ .newly { border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--line)); border-radius: var(--radius-lg); background: color-mix(in srgb, var(--accent) 6%, transparent); padding: .8rem 1rem; margin: 0 0 1rem; } .newly-h { font-size: .92rem; font-weight: var(--weight-strong); margin: 0; } .newly-said { margin: .2rem 0 .6rem; font-size: .82rem; color: var(--soft); } .newly-l { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .35rem; } .newly-p { display: flex; align-items: center; gap: .5rem; min-width: 0; } .newly-a { display: flex; align-items: center; gap: .5rem; text-decoration: none; color: var(--fg); min-width: 0; } .newly-n { font-weight: var(--weight-strong); font-size: .86rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .newly-when { font-size: .72rem; margin-left: auto; white-space: nowrap; } .newly-more { margin: .6rem 0 0; font-size: .76rem; } @media (min-width: 30rem) { .newly-l { flex-direction: row; flex-wrap: wrap; gap: .4rem .9rem; } .newly-p { flex: 0 1 auto; } .newly-when { margin-left: .2rem; } } .gm-list { display: flex; flex-direction: column; gap: .3rem; margin: 0 0 1rem; } .gm-item { display: flex; align-items: center; gap: .8rem; padding: .6rem .2rem; border-bottom: 1px solid var(--line-soft); flex-wrap: wrap; } .gm-item.done .gm-obj { text-decoration: line-through; color: var(--soft); } .gm-obj { font-weight: var(--weight-strong); flex: 1; min-width: 12rem; } .gm-controls { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; } .gm-f, .gm-edit { margin: 0; } .gm-controls button, .gm-edit summary { cursor: pointer; font: inherit; font-size: .76rem; padding: .28rem .7rem; border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: var(--soft); list-style: none; } .gm-done { color: #2b8a3e; } .gm-ef { display: flex; gap: .4rem; margin: .5rem 0 .2rem; flex-basis: 100%; } .gm-einput { flex: 1; font: inherit; padding: .45rem .7rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); color: var(--fg); } .gm-add { display: flex; gap: .5rem; } .gm-addinput { flex: 1; font: inherit; padding: .6rem .9rem; border: 1px solid var(--line); border-radius: var(--radius); background: color-mix(in srgb, var(--accent) 6%, transparent); color: var(--fg); } .gm-add button { cursor: pointer; font: inherit; font-weight: var(--weight-strong); padding: .6rem 1.2rem; border: 0; border-radius: var(--radius); background: var(--accent); color: #fff; } .gsw { display: flex; flex-wrap: wrap; gap: .3rem; } .gsw-p { text-decoration: none; font-size: .74rem; color: var(--soft); border: 1px solid var(--line); border-radius: 999px; padding: .2rem .7rem; } .gsw-p.on { background: var(--accent); color: #fff; border-color: var(--accent); } .src-count { font-size: .8rem; color: var(--soft); } .src-explain { font-size: .85rem; margin: .3rem 0 1rem; max-width: 48ch; } .dash-prov { font-size: .82rem; margin: 0 0 1rem; } /* AT FULL STRENGTH. This link sat inside a paragraph carrying the soft class, which is opacity .5 — so "manage Sources" was accent at half strength and read as inert. The colour was never the problem; the inherited dimming was. Opacity 1 here restores it without changing soft, which is doing its job everywhere else. (No backticks in this comment: it is inside a template literal, where one ends the string.) */ .soft a, .dash-prov a { color: var(--accent); opacity: 1; text-decoration: none; } /* Contact panel — the person detail as an in-app section. */ .cd { max-width: 44rem; } .cd .back { margin: 0 0 1rem; } .cd .back a { color: var(--soft); text-decoration: none; font-size: var(--fs-sm); } .cd-id { font-family: var(--mono); font-size: var(--fs-sm); color: var(--faint); margin: 0 0 .15rem; } .cd-name { margin: 0 0 .2rem; font-size: 1.7rem; letter-spacing: -.02em; } .cd-iq { display: flex; gap: .55rem; flex-wrap: wrap; align-items: center; margin: .8rem 0 .2rem; } .cd-iq .soft { font-size: .84rem; } .cd-iq b { color: var(--fg); } .cd-h { font-size: 1rem; margin: 1.5rem 0 .5rem; } .cd-comms { list-style: none; padding: 0; margin: .3rem 0; } .cd-comms li { padding: .55rem 0; border-bottom: 1px solid var(--line-soft); } .cd-thread { border: 1px solid var(--line); border-radius: var(--radius); padding: .1rem .8rem .4rem; margin: 0 0 .7rem; } .cd-thread-h { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; padding: .5rem 0 .1rem; } .cd-thread-h b { font-size: .9rem; } .cd-thread .cd-comms li:last-child { border-bottom: 0; } .dbl { border: 1px solid var(--accent); border-radius: var(--radius-lg); padding: .8rem 1rem; margin: 0 0 1rem; } .dbl select { font: inherit; margin-top: .3rem; padding: .3rem; border-radius: var(--radius); border: 1px solid var(--line); } .cd-acts { display: flex; gap: .4rem; flex-wrap: wrap; margin: .5rem 0 .2rem; } .cd-act { display: inline; } .cd-act button { font: inherit; padding: .3rem .7rem; border-radius: var(--radius); border: 1px solid var(--line); background: transparent; cursor: pointer; } .cd-danger { color: var(--danger); } .cd-fields { list-style: none; padding: 0; margin: .5rem 0; display: flex; flex-direction: column; gap: .3rem; } .cd-frow { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; } .cd-fmore { margin: .15rem 0 .1rem; } .cd-fmore > summary { font-size: .74rem; color: var(--soft); cursor: pointer; list-style: none; display: inline-block; padding: .15rem 0; } .cd-fmore > summary::-webkit-details-marker { display: none; } .cd-fmore > summary::before { content: '\203A'; margin-right: .3rem; display: inline-block; transition: transform .12s ease; } .cd-fmore[open] > summary::before { transform: rotate(90deg); } .cd-fmore > summary:hover { color: var(--accent); } .cd-field { display: flex; align-items: baseline; gap: .5rem; padding: .3rem 0; border-bottom: 1px solid var(--line-soft); } /* A field's own actions, derived — edit takes the new value, clear takes nothing. Kept quiet: they sit beside the value and should not compete with it. */ .cd-facts { display: inline-flex; gap: .3rem; align-items: center; margin-left: auto; } .cd-fedit, .cd-fclear { display: inline-flex; gap: .25rem; } .cd-facts button { font: inherit; font-size: .74rem; padding: .12rem .5rem; border-radius: var(--radius); border: 1px solid var(--line); background: transparent; cursor: pointer; color: var(--soft); } /* --ink2 is declared nowhere either, so the hover border never changed. --line is the border token. */ .cd-facts button:hover { color: var(--ink); border-color: var(--line); } .cd-finput { font: inherit; font-size: .78rem; padding: .1rem .35rem; width: 9rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: inherit; } .cd-fname { font-size: .78rem; color: var(--soft); min-width: 6.5rem; } .cd-fval { flex: 1; font-weight: 500; } .cd-more { margin: .2rem 0 .6rem; } .cd-more summary { cursor: pointer; font-size: .85rem; color: var(--soft); } .cd-proposals { border: 1px solid var(--accent); border-radius: var(--radius-lg); padding: .7rem .9rem; margin: .6rem 0; } .cd-prop { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; padding: .25rem 0; } .cd-propacts { margin-left: auto; display: flex; gap: .35rem; } .cd-tags { display: flex; flex-wrap: wrap; gap: .35rem; margin: .3rem 0 .6rem; } .cd-notes { list-style: none; padding: 0; margin: .3rem 0 .8rem; } .cd-notes li { padding: .5rem 0; border-bottom: 1px solid var(--line-soft); } .cd-nmeta { color: var(--faint); font-size: var(--fs-sm); font-family: var(--mono); } .cd-noteform { display: flex; flex-direction: column; gap: .5rem; margin: .3rem 0 .5rem; max-width: 34rem; } .cd-noteform textarea { width: 100%; resize: vertical; font: inherit; color: var(--fg); background: color-mix(in srgb, var(--accent) 6%, transparent); border: 1px solid var(--line); border-radius: var(--radius); padding: .6rem .8rem; } .cd-noterow { display: flex; gap: .5rem; } .cd-noterow input { flex: 1; font: inherit; color: var(--fg); background: color-mix(in srgb, var(--accent) 6%, transparent); border: 1px solid var(--line); border-radius: var(--radius); padding: .5rem .8rem; } .cd-noterow button { border: 0; cursor: pointer; border-radius: var(--radius); padding: .5rem 1.1rem; background: var(--accent); color: var(--accent-fg); font: inherit; font-weight: var(--weight-strong); } .cd-noteform textarea:focus, .cd-noterow input:focus, .cd-fname:focus { outline: none; border-color: var(--accent); } .cd-files { list-style: none; padding: 0; margin: .3rem 0 .8rem; } .cd-files li { padding: .5rem 0; border-bottom: 1px solid var(--line-soft); } .cd-fmeta { font-weight: var(--weight-strong); font-size: .85rem; } .cd-fname { font: inherit; color: var(--fg); background: color-mix(in srgb, var(--accent) 6%, transparent); border: 1px solid var(--line); border-radius: var(--radius); padding: .5rem .8rem; } .cd-cmeta { display: block; font-size: .68rem; color: var(--faint); margin-bottom: .1rem; } /* A ZONE is a bounded thing. Details and Additional elements answer different questions, and two headings over two unbounded lists read as one list with a word in the middle. The border is what makes the split visible rather than merely stated. */ .cd-zone { border: 1px solid var(--line-soft); border-radius: 10px; padding: .55rem .75rem; margin: .25rem 0 .9rem; } /* SOCIALS: a row of marks, sized to be hit with a thumb. */ .cd-socials { display: flex; flex-wrap: wrap; gap: .4rem; margin: .5rem 0 .2rem; } .cd-soc { display: inline-flex; align-items: center; gap: .35rem; min-height: 40px; padding: .3rem .6rem; border: 1px solid var(--line-soft); border-radius: 999px; text-decoration: none; color: inherit; } .cd-soc:hover { border-color: var(--accent); } .cd-soc .icon { font-size: 1rem; line-height: 1; } .cd-socn { font-size: .8rem; } .cd-soc-flat { opacity: .7; cursor: default; } /* The way back to the original item. Quiet — it sits under every entry, so it must not shout. */ .cd-clink { display: inline-block; margin-top: .25rem; font-size: .78rem; text-decoration: none; color: var(--accent); } .cd-clink:hover { text-decoration: underline; } .cd-tagform { display: flex; gap: .4rem; margin-top: .5rem; } .cd-tagform input { flex: 1; } /* A CLAIM, with its evidence. The bar gives the confidence a length, so two claims can be compared without reading two numbers. */ .cd-claims { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .6rem; } .cd-claims li { padding: .55rem .7rem; border: 1px solid var(--line-soft); border-radius: 10px; } .cd-contested { display: inline-block; font: 600 .66rem/1 var(--mono); color: var(--bad, #c4553d); border: 1px solid currentColor; border-radius: 999px; padding: .15rem .5rem; margin-top: .3rem; } .cd-claim-h { display: flex; align-items: center; gap: .5rem; } .cd-conf { flex: 1; max-width: 140px; height: 6px; border-radius: 3px; background: var(--line-soft); overflow: hidden; } .cd-conf-f { display: block; height: 100%; background: var(--accent); } .cd-conf-n { font-size: .78rem; font-variant-numeric: tabular-nums; opacity: .75; } .cd-ev { margin: .4rem 0 .25rem; padding-left: .6rem; border-left: 2px solid var(--line-soft); font-size: .85rem; font-style: italic; } .cd-ev-none { margin: .35rem 0 .25rem; font-size: .8rem; } /* THE NETWORK. Scrolls inside its own box on a narrow screen rather than making the page scroll sideways; the drawing keeps its aspect so the shape of a network stays the shape of it. */ /* A DRAWING HAS A SIZE. Left to fill the column it became 1350px across on a laptop, pushing the thing a person came here to DO — find a route — below the fold. Capped and centred: the graph is read at a glance, not studied, and it stops being readable long before it stops fitting. */ .ng-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: .4rem 0 .3rem; } .ng { display: block; width: 100%; max-width: 560px; min-width: 340px; height: auto; margin: 0 auto; } .ng-e { stroke: var(--line); stroke-width: 1; opacity: .55; } .ng-e-both { stroke: var(--accent); stroke-width: 1.6; opacity: .5; } .ng-n { fill: var(--card); stroke: var(--accent); stroke-width: 2; } .ng-n2 { stroke: var(--line); fill: var(--fill); } .ng-me { fill: var(--accent); } .ng-mi { fill: #fff; font-size: .72rem; font-weight: 700; text-anchor: middle; } /* Labels sit ON the drawing, so they take the body colour, not the muted one — at this size --soft is unreadable against the ground, and a name you cannot read is not a label. */ .ng-l { fill: var(--fg); opacity: .72; font-size: .68rem; text-anchor: middle; } .ng a:hover .ng-n { fill: var(--accent); } .ng a:focus-visible .ng-n { outline: 2px solid var(--accent); } .ng-key { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; font-size: .78rem; margin-bottom: 1.2rem; } .ng-reach { border-top: 1px solid var(--line-soft); padding-top: .6rem; } .ng-forms { display: flex; flex-direction: column; gap: 1rem; margin: .5rem 0; } .ng-f label { display: block; font-size: .8rem; font-weight: var(--weight-strong); margin-bottom: .3rem; } .ng-frow { display: flex; gap: .4rem; } .ng-frow input { flex: 1; min-width: 0; } .ng-f .soft { font-size: .75rem; margin: .3rem 0 0; } /* WHAT THE NETWORK KNOWS. Chips rather than a dropdown: a person scans them, and the count beside each is the thing that makes the list worth reading rather than just clicking through. Wraps, because the list is as long as somebody's network is interesting and must stay readable on a phone. */ /* A SOURCE MID-READ. Distinct from both "press me" and "done" — a control that looks pressable while it is working invites a second press, and one that looks finished while it is working is a lie. */ .osrc-live { color: var(--accent); font-weight: var(--weight-strong); } .osrc-live::before { content: ''; display: inline-block; width: .5rem; height: .5rem; margin-right: .4rem; border-radius: 50%; background: var(--accent); animation: osrc-pulse 1.4s ease-in-out infinite; } @keyframes osrc-pulse { 0%, 100% { opacity: .25 } 50% { opacity: 1 } } @media (prefers-reduced-motion: reduce) { .osrc-live::before { animation: none; opacity: .8 } } .ng-known { margin-top: .9rem; padding: .7rem .8rem; border: 1px solid var(--line-soft); border-radius: 10px; } .ng-known-h { display: block; font-size: .75rem; margin-bottom: .35rem; } .ng-known-list { display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: .35rem; } .ng-known-i { display: inline-flex; align-items: center; gap: .3rem; font-size: .78rem; line-height: 1; padding: .28rem .5rem; border: 1px solid var(--line-soft); border-radius: 999px; text-decoration: none; color: inherit; } .ng-known-i:hover { border-color: var(--accent); } .ng-known-i.on { border-color: var(--accent); background: var(--accent-soft); font-weight: var(--weight-strong); } .ng-known-n { font-size: .7rem; color: var(--soft); font-variant-numeric: tabular-nums; } .ng-known .soft { display: block; font-size: .72rem; margin: 0; } .ng-h3 { font-size: .95rem; margin: 0 0 .4rem; } .ng-path, .ng-intro { border: 1px solid var(--line-soft); border-radius: 10px; padding: .7rem .8rem; margin-top: .9rem; } /* THE CHAIN. A route is read left to right and must stay readable when it wraps. */ .ng-chain { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; padding: 0; margin: 0 0 .4rem; } .ng-chain li + li::before { content: '\2192'; margin-right: .3rem; color: var(--soft); } .ng-ranked { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .7rem; } .ng-r-h { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; } .ng-why { margin: .25rem 0 0; font-size: .88rem; line-height: 1.45; } @media (min-width: 720px) { .ng-forms { flex-direction: row; } .ng-f { flex: 1; } } /* THE DIGEST. Blocks, because a digest is read in a glance and a flat list defeats that. */ .dg-send { display: flex; flex-direction: column; gap: .15rem; border: 1px solid var(--line-soft); border-left: 3px solid var(--accent); border-radius: 8px; padding: .55rem .7rem; margin: .5rem 0 1.1rem; font-size: .85rem; } .dg-send-off { border-left-color: var(--warn, #c2853a); } .dg-send .soft { font-size: .78rem; } .dg-b { border: 1px solid var(--line-soft); border-radius: 10px; padding: .6rem .8rem; margin-bottom: .8rem; } .dg-h { display: flex; align-items: center; gap: .4rem; font-size: .95rem; margin: 0; } .dg-why { font-size: .78rem; margin: .2rem 0 .45rem; } .dg-l { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .4rem; } .dg-l li { font-size: .88rem; line-height: 1.45; } /* Sources section — connect cards, import, history window. */ .chips { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 1rem; } .srclist { display: flex; flex-direction: column; gap: .55rem; } .srcrow { display: flex; align-items: center; gap: .8rem; margin: 0; padding: .7rem .9rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); } .srcrow.soon { opacity: .55; } .srcrow.soon em { margin-left: auto; font-size: .64rem; text-transform: uppercase; letter-spacing: .06em; font-style: normal; color: var(--faint); border: 1px solid var(--line); border-radius: 1rem; padding: .1rem .55rem; } .srcbtn { margin-left: auto; padding: .45rem 1rem; border: 0; border-radius: var(--radius); background: var(--accent); color: #fff; cursor: pointer; font-size: .82rem; white-space: nowrap; } .srcta { width: 100%; font-family: var(--mono); font-size: .84rem; color: var(--fg); background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: .6rem .8rem; resize: vertical; margin: 0 0 .6rem; } .srcwin { display: flex; gap: .5rem; flex-wrap: wrap; } .srcwinbtn { padding: .5rem .9rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); color: var(--fg); cursor: pointer; font-size: .84rem; } .srcwinbtn:hover { border-color: var(--accent); color: var(--accent); } .dash-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; align-items: start; } .dash .card { border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 1rem 1.2rem; } .dash .card h2 { margin: 0 0 .7rem; font-size: 1rem; } @media (min-width: 760px) { .dash-grid { grid-template-columns: 1fr 1fr; } .dash-wide { grid-column: 1 / -1; } } .jchoice .card { display: flex; justify-content: space-between; align-items: center; gap: 1rem; } .jchoice .card-a { margin: 0; } /* Authored skins — each a [data-skin] token-override block, saved via /decorate, applied by ?skin=. */ html[data-skin="test-skin"] { --bg: #ffffff; --fg: #0f172a; --accent: #ff40ff; --fill: #f1f5f9; --line: #e2e8f0; --danger: #aa7942; --ok: #16a34a; --font: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; --radius: 8px; --fs: 16px } html[data-skin="feather-dark"] { --bg: #070910; --fg: #e8eef7; --accent: #23d3ee; --fill: #0f1827; --line: #1f2a3c; --danger: #f0666b; --ok: #21c55e; --font: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; --radius: 12px; --fs: 16px } /* Authored layouts — each a [data-layout] slot-arrangement block, saved via /decorate, applied by ?layout=. */