/* ============================================================================ MindGenesisOS — the workspace. Built on Superconductor's shell: a 264px sidebar against a scrolling main, sectioned nav with counts, calm editorial type, dark by default. That layout took months to settle and there is no reason to relearn it. What changes is what the sidebar is FOR. Superconductor's spine is projects; this one's is the three days, because that is the product a client bought. ========================================================================== */ :root { --sans: "Inter", system-ui, -apple-system, sans-serif; --serif: "Newsreader", Georgia, "Times New Roman", serif; --mono: ui-monospace, SFMono-Regular, Menlo, monospace; --step-fine: 0.75rem; --step-small: 0.8125rem; --step-body: 0.9375rem; --step-lg: 1.0625rem; --step-h2: 1.7rem; --radius: 6px; --radius-sm: 4px; /* MindGenesis navy, from the logo, in place of Superconductor's blue. */ --bg: #0e1013; --bg-raised: #171a1f; --bg-sunken: #0b0d10; --bg-hover: #1f242b; --line: #242830; --ink: #e8ebef; --ink-soft: #aab1bd; --ink-mute: #7a828f; --ink-faint: #545b66; --accent: #2f6fb5; --accent-soft: #24568c; --accent-wash: rgba(47, 111, 181, 0.16); --gold: #f2c230; --red: #e0685c; --green: #4fb07a; --amber: #d8a53f; } @media (prefers-color-scheme: light) { :root { --bg: #f4f6f8; --bg-raised: #ffffff; --bg-sunken: #eaedf1; --bg-hover: #e9edf2; --line: #dde1e7; --ink: #16191d; --ink-soft: #4a515b; --ink-mute: #6b727d; --ink-faint: #98a0ab; --accent-wash: rgba(47, 111, 181, 0.1); } } * { box-sizing: border-box; } body.app { margin: 0; font-family: var(--sans); font-size: var(--step-body); background: var(--bg); color: var(--ink); -webkit-font-smoothing: antialiased; } a { color: inherit; text-decoration: none; cursor: pointer; } button { font: inherit; cursor: pointer; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--bg-raised); color: var(--ink); padding: 0.45rem 0.85rem; } button:hover { background: var(--bg-hover); } button.primary { background: var(--accent); border-color: var(--accent); color: #fff; } button.primary:hover { background: var(--accent-soft); } button:disabled { opacity: 0.5; cursor: default; } /* ---- shell ---------------------------------------------------------------- */ .shell { display: grid; grid-template-columns: 264px 1fr; height: 100vh; overflow: hidden; } @media (max-width: 60rem) { .shell { grid-template-columns: 1fr; height: auto; } .sidebar { display: none; } } .sidebar { display: flex; flex-direction: column; background: var(--bg-sunken); border-right: 1px solid var(--line); overflow: hidden; } .brand { display: flex; align-items: center; gap: 0.6rem; padding: 1.15rem 1.25rem 1rem; user-select: none; } .brand-mark { width: 30px; height: 30px; display: block; object-fit: contain; } @media (prefers-color-scheme: dark) { .brand-mark { filter: brightness(1.35) saturate(1.05); } } .brand-name { font-size: 0.9rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; } .nav { flex: 1; overflow-y: auto; padding: 0.25rem 0.6rem 1rem; } .nav-section { margin-top: 1.35rem; } .nav-section-head { display: flex; align-items: baseline; justify-content: space-between; padding: 0 0.65rem 0.4rem; font-size: var(--step-fine); text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-faint); } .nav-item { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.42rem 0.65rem; border-radius: var(--radius-sm); color: var(--ink-soft); font-size: var(--step-small); line-height: 1.3; } .nav-item:hover { background: var(--bg-hover); color: var(--ink); } .nav-item.active { background: var(--accent-wash); color: var(--ink); font-weight: 500; } .nav-count { font-size: var(--step-fine); color: var(--ink-faint); font-variant-numeric: tabular-nums; } .nav-note { padding: 0.3rem 0.65rem; font-size: var(--step-fine); color: var(--ink-faint); } /* The day a session is on. The spine of the whole product, so it reads as a sequence rather than a set of tabs — done, here, not yet. */ .day-head { display: flex; align-items: center; gap: 0.5rem; } .day-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-faint); flex: none; } .day-dot.done { background: var(--green); } .day-dot.now { background: var(--gold); } .sidebar-foot { border-top: 1px solid var(--line); padding: 0.8rem 1rem; } .who-name { font-weight: 500; font-size: var(--step-small); } .who-role { font-size: var(--step-fine); color: var(--ink-faint); text-transform: capitalize; } .foot-actions { display: flex; gap: 0.35rem; margin-top: 0.6rem; } .foot-actions button { padding: 0.3rem 0.55rem; font-size: var(--step-fine); } /* ---- main ----------------------------------------------------------------- */ .main { overflow-y: auto; } .main-head { position: sticky; top: 0; z-index: 5; display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 1.1rem 2rem; background: var(--bg); border-bottom: 1px solid var(--line); } .main-title { font-family: var(--serif); font-size: var(--step-h2); margin: 0; font-weight: 400; } .main-sub { font-size: var(--step-small); color: var(--ink-mute); } .main-body { padding: 1.6rem 2rem 5rem; max-width: 1100px; } .panel { background: var(--bg-raised); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.2rem 1.4rem; margin-bottom: 1.2rem; } .panel h3 { margin: 0 0 0.9rem; font-size: var(--step-lg); font-weight: 600; } .panel .sub { font-size: var(--step-small); color: var(--ink-mute); margin: -0.6rem 0 1rem; } .cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; align-items: start; } @media (max-width: 70rem) { .cols { grid-template-columns: 1fr; } } .empty { color: var(--ink-faint); font-size: var(--step-small); } .muted { color: var(--ink-mute); } /* ---- the room ------------------------------------------------------------- */ textarea, input[type="text"], input[type="email"], input[type="password"] { width: 100%; padding: 0.7rem 0.85rem; font: inherit; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-sm); } textarea { min-height: 11rem; line-height: 1.55; resize: vertical; } textarea:focus, input:focus { outline: none; border-color: var(--accent); } .speakers { display: flex; gap: 0.4rem; margin-bottom: 0.7rem; } .speakers a { font-size: var(--step-small); padding: 0.3rem 0.75rem; border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--ink-mute); } .speakers a.on { background: var(--accent); border-color: var(--accent); color: #fff; } .actions { display: flex; align-items: center; gap: 0.8rem; margin-top: 0.8rem; } .hint { font-size: var(--step-small); color: var(--ink-mute); } .finding { padding: 0.75rem 0 0.9rem; border-bottom: 1px solid var(--line); } .finding:last-child { border-bottom: none; } /* Was red. A perspective is the most valuable thing the session produces, and an alarm colour on it tells the reader something has gone wrong before they read a word. */ .kind { font-size: var(--step-fine); letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); margin: 0 0 0.5rem; } .kind.agree { color: var(--green); } .said { margin: 0.15rem 0; font-size: var(--step-body); line-height: 1.5; } .who { color: var(--ink-faint); font-size: var(--step-fine); text-transform: uppercase; letter-spacing: 0.05em; margin-right: 0.35rem; } .why { margin: 0.5rem 0 0; font-size: var(--step-small); color: var(--ink-mute); line-height: 1.5; } .claim-row { font-size: var(--step-small); color: var(--ink-soft); padding: 0.25rem 0 0.25rem 0.7rem; border-left: 2px solid var(--line); margin-bottom: 0.35rem; } .claim-row.absence { border-left-color: var(--red); color: var(--ink); } /* THE CONSOLE — four steps, in the order the work happens. * * A numbered rail down the left, because these genuinely are a sequence: none of them works * before the one above it, and that is the fact Scott said the old app hid from him. The dot * carries the state so the page can be read at arm's length while something is uploading. */ .step { display: grid; grid-template-columns: 2.2rem 1fr; gap: 0 1.1rem; padding: 0 0 1.6rem; } .step-rail { position: relative; } .step-rail::before { content: ""; position: absolute; left: 0.62rem; top: 1.9rem; bottom: -1.6rem; width: 1px; background: var(--line); } .step:last-child .step-rail::before { display: none; } .step-n { display: grid; place-items: center; width: 1.35rem; height: 1.35rem; margin-top: 0.35rem; border-radius: 50%; font-size: var(--step-fine); font-variant-numeric: tabular-nums; border: 1px solid var(--line); background: var(--bg-raised); color: var(--ink-mute); } .step.part .step-n { border-color: var(--amber); color: var(--amber); } .step.done .step-n { border-color: var(--green); color: var(--green); } .step.off { opacity: 0.55; } .step-body { min-width: 0; background: var(--bg-raised); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.1rem 1.3rem 1.2rem; } .step.done .step-body { border-color: color-mix(in srgb, var(--green) 35%, var(--line)); } .step-body h3 { margin: 0 0 0.7rem; font-size: var(--step-lg); font-weight: 600; } .step-line { margin: 0.2rem 0 0; font-size: var(--step-body); } .step-line.sub { margin-top: 0.9rem; font-size: var(--step-small); color: var(--ink-mute); } /* Who is in, and who we are still waiting on. */ .who { list-style: none; margin: 0 0 0.3rem; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; } .who li { display: flex; align-items: baseline; gap: 0.6rem; font-size: var(--step-small); } .who li::before { content: "○"; color: var(--ink-faint); } .who li.in::before { content: "●"; color: var(--green); } .who-name { color: var(--ink); font-weight: 600; } .who-state { color: var(--ink-mute); } /* The eighteen areas at a glance — which are in, which are not. */ .areas { display: flex; flex-wrap: wrap; gap: 0.3rem; margin: 0.8rem 0 0; } .area-chip { display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: var(--radius-sm); font-size: var(--step-fine); border: 1px solid var(--line); color: var(--ink-faint); background: var(--bg); } .area-chip.on { border-color: var(--green); color: var(--green); } /* Ninety minutes of work, said out loud. */ .running { margin-top: 0.9rem; display: flex; flex-direction: column; gap: 0.5rem; } .bar { height: 4px; border-radius: 999px; background: var(--bg-sunken); overflow: hidden; } .bar-fill { display: block; height: 100%; width: 0; background: var(--accent); transition: width 0.6s ease; } .warn { color: var(--amber); } /* Everything that is not the console, folded away. */ /* Lean is only ever set for a facilitator, so this can hide everything without reaching a client's nav — and it hides EVERYTHING, not just the staff items, because "Your record" and "Where to start" are not what he came here to do either. There is no link out of it: the way back is ?more=1, which is ours and not his. */ .nav.lean .nav-item:not([data-view="build"]), .nav.lean .nav-section { display: none; } /* Hiding the sidebar altogether. * * With the console there is one item in it, and 264px holding one word is 264px of nothing. * Collapsed rather than removed: "← Sessions" and "Sign out" live down there, so it has to * be one click back. */ /* ONE COLUMN, not a zero-width one. * * `display:none` takes the sidebar out of the grid entirely, so .main becomes the first * item — and with `0 1fr` the first column is zero wide. The whole workspace collapsed to * nothing and stayed collapsed, because the choice is remembered: every load afterwards * opened onto an empty window, whether you clicked an engagement or made a new one. * * A hidden grid item is not a narrow grid item. The track has to go with it. */ .shell.tucked { grid-template-columns: 1fr; } .shell.tucked .sidebar { display: none; } .tuck, .untuck { border: 1px solid var(--line); background: var(--bg-raised); color: var(--ink-mute); border-radius: var(--radius-sm); cursor: pointer; line-height: 1; width: 1.5rem; height: 1.5rem; padding: 0; font-size: 0.9rem; } .tuck:hover, .untuck:hover { color: var(--ink); border-color: var(--ink-faint); } .tuck { margin-left: auto; } .untuck { display: none; margin-right: 0.9rem; } .shell.tucked .untuck { display: block; } /* A DOCUMENT RATHER THAN A STACK OF CARDS. * * Three founders read one after another as cards is three of everything and no way to * compare them: the whole value of the prep read is Dominic's answer NEXT TO Noah's, and a * card puts them a scroll apart. Scott's own version of this document is a table for that * reason — person against signal, tension and posture, and the day as a numbered sequence * with a reason in every row. * * Real table markup, not a grid of divs, because the relationship is genuinely tabular and * a screen reader should be told so. `.doc-scroll` carries the overflow: a four-column * table cannot reflow to a phone, and the page body scrolling sideways is worse than the * table doing it. */ .doc-scroll { overflow-x: auto; } .doc { width: 100%; min-width: 38rem; border-collapse: collapse; font-size: var(--step-small); } .doc th, .doc td { text-align: left; vertical-align: top; line-height: 1.5; padding: 0.65rem 1rem 0.7rem 0; border-bottom: 1px solid var(--line); } .doc th:last-child, .doc td:last-child { padding-right: 0; } .doc thead th { font-size: var(--step-fine); text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-faint); font-weight: 500; white-space: nowrap; padding-bottom: 0.45rem; } .doc tbody th { color: var(--ink); font-weight: 600; } .doc td { color: var(--ink-soft); } .doc tbody tr:last-child > * { border-bottom: none; } /* The row number. Tabular figures so 9 and 10 line up down the column. */ .doc .at { width: 2rem; color: var(--ink-faint); font-variant-numeric: tabular-nums; } .doc .area { white-space: nowrap; } .doc-note { display: block; color: var(--ink-faint); font-size: var(--step-fine); margin-top: 0.25rem; } /* Evidence hangs under the row it belongs to rather than beside it — the quotations are long and would set the column width for everything above them. */ .doc-ev > td { padding-top: 0; border-bottom: 1px solid var(--line); } .doc-ev .ev { margin: 0; } /* Where an area sits: Scott's four levels, said in words rather than coloured. */ .lvl { margin-left: 0.5rem; font-size: var(--step-fine); text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent); white-space: nowrap; } .lvl.quiet { color: var(--ink-faint); } .sheet { font: 12.5px/1.6 var(--mono); white-space: pre-wrap; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 1rem 1.1rem; color: var(--ink-soft); max-height: 30rem; overflow-y: auto; margin: 0.6rem 0; } /* ---- the prompt library: what a client lands on -------------------------- */ /* Scott, 7 Aug: "here's where you get started... a prompt library instead of dashboards." Cards rather than a list, because the point is that they are pressed. The prompt itself is shown in full — a button whose label hides what it will do is a button people do not press twice. */ .lib { margin-bottom: 2.4rem; } .lib-head { margin-bottom: 0.9rem; } .lib-head h3 { font-size: var(--step-lg); margin: 0 0 0.15rem; } .lib-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 0.7rem; } .card { display: flex; flex-direction: column; gap: 0.4rem; text-align: left; width: 100%; cursor: pointer; background: var(--bg-raised); border: 1px solid var(--line); border-radius: var(--radius); padding: 0.95rem 1rem; font: inherit; color: var(--ink); transition: border-color 0.12s, background 0.12s; } .card:hover { border-color: var(--accent); background: var(--bg-hover); } .card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .card-label { font-size: var(--step-fine); letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); } .card-prompt { font-size: var(--step-body); line-height: 1.45; } .card-why { font-size: var(--step-fine); color: var(--ink-mute); line-height: 1.45; } @media (prefers-reduced-motion: reduce) { .card { transition: none; } } /* A document, rather than a file with the Markdown showing. The client's own record is the thing they were sold; it reads as prose or it reads as an export somebody forgot to finish. */ .doc { color: var(--ink); line-height: 1.65; max-height: 40rem; overflow-y: auto; padding-right: .5rem; } .doc > :first-child { margin-top: 0; } .doc h2 { font: 500 1.35rem/1.3 var(--serif, inherit); margin: 1.8rem 0 .6rem; color: var(--ink); } .doc h3 { font-size: 1.05rem; font-weight: 600; margin: 1.6rem 0 .4rem; color: var(--ink); } .doc h4, .doc h5 { font-size: .95rem; font-weight: 600; margin: 1.2rem 0 .3rem; color: var(--ink); } .doc p { margin: 0 0 .85rem; } .doc ul { margin: 0 0 .9rem; padding-left: 1.2rem; } .doc li { margin: .2rem 0; } .doc hr { border: 0; border-top: 1px solid var(--line); margin: 1.6rem 0; } .doc em { color: var(--ink-mute); } /* Where the two of them see it differently — the one place both sides stand together. */ .doc blockquote { margin: 1rem 0; padding: .8rem 1rem; border-left: 2px solid var(--accent); background: var(--bg); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; } .doc blockquote p { margin: 0 0 .5rem; } .doc blockquote p:last-child { margin: 0; } .doc details { margin: .6rem 0 1.2rem; } .doc summary { cursor: pointer; color: var(--ink-mute); font-size: var(--step-fine); } .doc details[open] summary { margin-bottom: .5rem; } .pill { display: inline-block; font-size: var(--step-fine); padding: 0.1rem 0.5rem; border-radius: 999px; border: 1px solid var(--line); color: var(--ink-mute); } .pill.on { border-color: var(--green); color: var(--green); } .pill.off { border-color: var(--amber); color: var(--amber); } /* ---- sign in / lobby ------------------------------------------------------ */ .gate { max-width: 22rem; margin: 14vh auto; padding: 0 1.5rem; } .gate img { height: 140px; display: block; margin: 0 auto 1.5rem; } @media (prefers-color-scheme: dark) { .gate img { filter: brightness(1.35) saturate(1.05); } } .gate input { margin-bottom: 0.6rem; } .gate button { width: 100%; } .gate .err { color: var(--red); font-size: var(--step-small); margin-top: 0.7rem; } .session-row { display: flex; gap: 1rem; align-items: baseline; padding: 0.85rem 0; border-top: 1px solid var(--line); cursor: pointer; } .session-row:hover .n { color: var(--accent); } .session-row .n { flex: 1; } .session-row .m { font-size: var(--step-small); color: var(--ink-faint); font-variant-numeric: tabular-nums; } /* ---- interview (Day 2) ---------------------------------------------------- */ .q-head { font-size: var(--step-fine); text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-faint); margin-bottom: 0.4rem; } .q-text { font-family: var(--serif); font-size: var(--step-lg); line-height: 1.45; margin: 0 0 1rem; } .reflection { border-left: 2px solid var(--accent); padding: 0.5rem 0 0.5rem 0.85rem; margin: 0.9rem 0; font-size: var(--step-small); color: var(--ink-soft); } .progress { height: 3px; background: var(--line); border-radius: 999px; overflow: hidden; margin-bottom: 1.2rem; } .progress i { display: block; height: 100%; background: var(--accent); } .hidden { display: none !important; } /* ---- the estate, at a glance ---------------------------------------------- */ /* A list made Scott count. These are the four questions he actually walks in with: how much is live, how much is stuck, how much is finished, how much is in it. */ .tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: .8rem; margin-bottom: 1.4rem; } .tile { background: var(--bg-raised); border: 1px solid var(--line); border-radius: var(--radius); padding: .9rem 1rem; } .tile b { display: block; font-size: 1.7rem; font-weight: 500; font-variant-numeric: tabular-nums; line-height: 1.1; } .tile span { font-size: var(--step-fine); color: var(--ink-mute); } .good { color: var(--green); } .warn { color: var(--amber); } .danger { color: var(--red); } .grid { width: 100%; border-collapse: collapse; font-size: var(--step-small); } .grid th { text-align: left; font-weight: 500; font-size: var(--step-fine); text-transform: uppercase; letter-spacing: .07em; color: var(--ink-faint); padding: .8rem 1rem; border-bottom: 1px solid var(--line); white-space: nowrap; } .grid td { padding: .75rem 1rem; border-bottom: 1px solid var(--line); vertical-align: top; } .grid tr:last-child td { border-bottom: none; } .grid tr:hover td { background: var(--bg-hover); } .grid .num { font-variant-numeric: tabular-nums; white-space: nowrap; } .grid-name { color: var(--ink); font-size: var(--step-body); } .grid-name:hover { color: var(--accent); } .grid-sub { display: block; font-size: var(--step-fine); color: var(--ink-faint); margin-top: .15rem; } .grid select { font: inherit; font-size: var(--step-fine); padding: .25rem .4rem; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-sm); } .row-actions { white-space: nowrap; text-align: right; } .row-actions a { font-size: var(--step-fine); color: var(--ink-faint); margin-left: .7rem; } .row-actions a:hover { color: var(--ink); } .row-actions a.danger:hover { color: var(--red); } /* ---- the client's page ---------------------------------------------------- Priorities above, tabs below. The order is the argument: what to look at first is drawn from both the form and the interview, so it belongs above the three tabs rather than inside one of them. */ .eyebrow { display: block; font-size: var(--step-fine); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: .8rem; } .pri { display: grid; grid-template-columns: 1.6rem 1fr auto; gap: .8rem; align-items: baseline; padding: .7rem 0; border-bottom: 1px solid var(--line); } .pri:last-child { border-bottom: none; } .pri-rank { color: var(--ink-faint); font-variant-numeric: tabular-nums; } .pri-name { margin: 0; font-size: var(--step-body); } .pri-note { margin: .2rem 0 0; font-size: var(--step-small); color: var(--ink-mute); line-height: 1.5; } /* Where the form and the interview point different ways. Marked, not flagged — it is the interesting row, not the worrying one. */ .pri.apart .pri-rank { color: var(--accent); } .pri-why { font-size: var(--step-fine); color: var(--ink-faint); text-align: right; max-width: 16rem; line-height: 1.4; } .tabs { display: flex; gap: 1.4rem; margin: 1.6rem 0 0; border-bottom: 1px solid var(--line); } .tabs a { padding: .55rem 0; margin-bottom: -1px; cursor: pointer; font-size: var(--step-small); color: var(--ink-faint); border-bottom: 2px solid transparent; } .tabs a:hover { color: var(--ink); } .tabs a.on { color: var(--ink); border-bottom-color: var(--accent); } @media (max-width: 720px) { .pri { grid-template-columns: 1.6rem 1fr; } .pri-why { grid-column: 2; text-align: left; max-width: none; margin-top: .3rem; } } /* ---- the portal ---------------------------------------------------------- The system the client keeps. Superconductor's shape: a list of conversations on the left, the one you are in on the right. A thread you can return to is the whole difference between a tool somebody tried and a place somebody works. */ .portal { display: grid; grid-template-columns: 15rem 1fr; gap: 1.5rem; align-items: start; } .portal-side { border-right: 1px solid var(--line); padding-right: 1.2rem; } .portal-new { display: block; width: 100%; text-align: left; padding: .4rem 0; } .portal-list { display: flex; flex-direction: column; gap: .1rem; margin-top: .4rem; } .thread { display: block; padding: .45rem .55rem; border-radius: var(--radius-sm); cursor: pointer; text-decoration: none; } .thread:hover { background: var(--bg-raised); } .thread.on { background: var(--accent-wash); } .thread-title { display: block; font-size: var(--step-small); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .thread-meta { display: block; font-size: var(--step-fine); color: var(--ink-faint); } .turns { display: flex; flex-direction: column; gap: 1.1rem; max-height: 26rem; overflow-y: auto; } .turn-who { margin: 0 0 .25rem; font-size: var(--step-fine); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); } .turn-body { line-height: 1.65; } /* What the client said sits back a little; what their system said carries the accent rule, so a thread scanned quickly reads as a conversation rather than a wall. */ .turn.user .turn-body { color: var(--ink-mute); } .turn.assistant { border-left: 2px solid var(--accent); padding-left: .9rem; } .turn-cited { margin: .4rem 0 0; font-size: var(--step-fine); color: var(--ink-faint); } /* The commands. They used to be small print telling people to type `menu` — a door you have to already know about is a wall. Shown only when a thread is empty: once somebody is talking, a grid of suggestions is in the way. */ .doors { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: .5rem; margin: 1rem 0 1.25rem; } .door { display: block; padding: .6rem .75rem; cursor: pointer; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-raised); } .door:hover { border-color: var(--accent); background: var(--accent-wash); } .door-label { display: block; font-size: var(--step-small); color: var(--ink); } .door-brief { display: block; font-size: var(--step-fine); color: var(--ink-faint); line-height: 1.45; margin-top: .15rem; } @media (max-width: 860px) { .portal { grid-template-columns: 1fr; } .portal-side { border-right: none; border-bottom: 1px solid var(--line); padding: 0 0 .8rem; } } /* A rail for work that takes minutes. Same shape as the interview's, because it is doing the same job: telling somebody the thing is moving. */ .ob-progress { height: 3px; background: var(--line); border-radius: 3px; overflow: hidden; margin: .6rem 0 0; } .ob-progress i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .4s ease; } /* ---- working ------------------------------------------------------------- */ /* Scott, 8 Aug: "It's not obvious that it's thinking when I submit a question and it takes a few seconds longer than ChatGPT." An assistant turn with nothing in it yet used to be an empty bubble, which reads as broken rather than as busy. Shown until the first token lands, which is usually well under a second. */ .working { display: flex; gap: 0.3rem; align-items: center; padding: 0.35rem 0; } .working i { width: 0.4rem; height: 0.4rem; border-radius: 50%; background: var(--ink-mute); opacity: 0.35; animation: working 1.1s ease-in-out infinite; } .working i:nth-child(2) { animation-delay: 0.15s; } .working i:nth-child(3) { animation-delay: 0.3s; } @keyframes working { 0%, 80%, 100% { opacity: 0.25; transform: translateY(0); } 40% { opacity: 0.9; transform: translateY(-2px); } } @media (prefers-reduced-motion: reduce) { .working i { animation: none; opacity: 0.5; } } /* ---- dropping documents in ---- The same control as the interview's intake door, needed here now that the facilitator can bring canvases written elsewhere. Defined in shell.css rather than copied out of interview.css because two copies of a control drift, and the second one is always the one nobody remembers to update. */ .drop { display: grid; place-items: center; gap: .3rem; text-align: center; margin: 1.25rem 0 .5rem; padding: 2.5rem 1.5rem; cursor: pointer; border: 1px dashed var(--line); border-radius: var(--radius); background: var(--bg-raised); transition: border-color .15s, background .15s; } .drop:hover, .drop.over { border-color: var(--accent); background: var(--accent-wash); } .drop-main { font-size: var(--step-lg); } .drop-sub { font-size: var(--step-fine); color: var(--ink-faint); } /* A button's label is not a paragraph. "Build the research brief" was wrapping to two lines inside a row that had plenty of space beside it. Worth knowing before reaching for style="…" to fix something like this: nginx serves `style-src 'self'` with no 'unsafe-inline', so every inline style attribute in this app is BLOCKED in production and does nothing. There are ~25 of them and they are all dead weight — the browser console says so on every page load. */ .actions .primary { white-space: nowrap; } /* A finding, under the question that produced it: what was found, the words it was found in, and the page they came from. Indented against the question so the two do not read as one block of prose. */ .cited { margin: 0.6rem 0 0 1rem; padding-left: 0.9rem; border-left: 2px solid var(--line); } .cited q { color: var(--ink-mute); } .cited a { color: var(--accent); word-break: break-all; } /* Pasting a canvas rather than uploading one. A canvas written inside a chat is text, and requiring somebody to save eighteen correctly-named PDFs before the product will look at them is a step that exists only because the code wanted a filename. */ .paste { margin-top: 0.6rem; } .paste summary { font-size: var(--step-small); color: var(--ink-faint); cursor: pointer; } .paste summary:hover { color: var(--ink); } .paste select, .paste textarea { width: 100%; margin-top: 0.6rem; padding: 0.5rem 0.6rem; background: var(--bg-sunken); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius-sm); font: inherit; font-size: var(--step-small); } .paste textarea { resize: vertical; } .paste button { margin-top: 0.6rem; } /* Controls that sit in a row of actions. The invite form used inline grid styles, which the CSP blocks, so the three fields stacked and the row read as three unrelated boxes. */ .actions input[type="text"], .actions input[type="email"], .actions select { flex: 1 1 12rem; } .actions input, .actions select { padding: 0.45rem 0.6rem; background: var(--bg-sunken); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius-sm); font: inherit; font-size: var(--step-small); } .actions a[data-okc], .finding a[data-okf] { color: var(--accent); cursor: pointer; } .finding a[data-okc] { color: var(--accent); cursor: pointer; } pre.sheet { white-space: pre-wrap; word-break: break-all; } /* ---- what the inline style attributes used to do ---- nginx serves `style-src 'self'` with no 'unsafe-inline', so every style="…" in this app was blocked and did nothing. The lobby's "Who are you sitting with?" form stacked instead of sitting in a row, the blueprint progress bar rendered at zero width, and every accent link rendered as plain text. All of it silent — the console said so on each page load and nothing on screen did. */ .btn-auto { width: auto; white-space: nowrap; } .foot-centered { justify-content: center; margin-top: 2rem; } /* =========================================================================== SIGN IN — Shan's design, mindgenesis-login.html, 12 August. =========================================================================== Scoped under #signin for the same reason the lobby is scoped: .brand, .logo, .form, .field, .error, .accent, .rule and .meta are all in use elsewhere in this file. Scoping is what lets the design be taken exactly as drawn. ------------------------------------------------------------------------- */ #signin { --navy-900: #0d2b47; --navy-700: #14395c; --lg-gold: #f2c230; --gold-hi: #ffd450; --lg-panel: #f6f8fb; --lg-ink: #16202b; --lg-ink-2: #4d5f72; --lg-ink-3: #66788b; --lg-ink-4: #8b9aac; --lg-line: #cfd9e5; --lg-line-soft: #e2e8f0; --lg-danger: #a03a3a; --lg-serif: "Source Serif 4", Georgia, serif; --lg-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace; position: absolute; inset: 0; overflow-y: auto; background: var(--navy-900); color: var(--lg-ink); font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; } #signin.hidden { display: none; } #signin ::placeholder { color: #a7b4c3; } #signin a { color: var(--navy-700); text-decoration: none; } #signin a:hover { color: var(--navy-900); text-decoration: underline; } #signin .mono { font-family: var(--lg-mono); letter-spacing: .14em; text-transform: uppercase; } #signin .login { min-height: 100vh; display: grid; grid-template-columns: minmax(0,1fr) minmax(440px,.78fr); } /* ---- brand side ---- */ #signin .brand-side { position: relative; overflow: hidden; padding: 44px 56px 40px; display: flex; flex-direction: column; justify-content: space-between; gap: 40px; } #signin .brand-side::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 96px 100%; } #signin .brand__top { position: relative; display: flex; align-items: center; gap: 16px; } #signin .brand__top .mono { font-size: 11.5px; } #signin .mono--gold { color: var(--lg-gold); letter-spacing: .18em; } #signin .mono--muted { color: #7f97af; } #signin .rule { flex: 1 1 auto; max-width: 180px; height: 1px; background: rgba(255,255,255,.16); } #signin .brand__body { position: relative; display: flex; flex-direction: column; gap: 34px; max-width: 620px; } #signin .brand__body h2 { font-family: var(--lg-serif); font-weight: 600; font-size: clamp(38px,4.2vw,62px); line-height: 1.03; margin: 0; color: #fff; letter-spacing: -.025em; text-wrap: balance; } #signin .accent { width: 120px; height: 2px; background: var(--lg-gold); } #signin .facts { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1px; max-width: 640px; background: rgba(255,255,255,.12); border-top: 1px solid rgba(255,255,255,.12); } #signin .fact { background: var(--navy-900); padding: 20px 22px 4px; display: flex; flex-direction: column; gap: 7px; } #signin .fact .mono { font-size: 11px; color: #7f97af; } #signin .fact--gold .mono { color: var(--lg-gold); } #signin .fact b { font-family: var(--lg-serif); font-size: 26px; font-weight: 600; color: #fff; line-height: 1; } /* ---- form side ---- */ #signin .pane { background: var(--lg-panel); padding: 44px 60px 40px; display: flex; flex-direction: column; justify-content: space-between; gap: 44px; box-shadow: -40px 0 80px -60px rgba(0,0,0,.6); } #signin .logo { height: 76px; width: auto; max-width: 240px; object-fit: contain; object-position: left center; align-self: flex-start; flex: 0 0 auto; display: block; margin: 0; } #signin .form { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; gap: 30px; max-width: 420px; } #signin .form__head h1 { font-family: var(--lg-serif); font-weight: 600; font-size: 34px; margin: 0 0 8px; color: var(--navy-900); letter-spacing: -.015em; line-height: 1.1; } #signin .form__head p { margin: 0; font-size: 14.5px; color: var(--lg-ink-3); } #signin .err { border-left: 2px solid var(--lg-danger); padding: 4px 0 4px 14px; font-size: 13.5px; line-height: 1.5; color: #8a3a3a; margin: 0; } #signin .err[hidden] { display: none; } #signin .fields { display: flex; flex-direction: column; gap: 26px; } #signin .field { display: flex; flex-direction: column; gap: 8px; border-bottom: 1px solid var(--lg-line); padding-bottom: 10px; transition: border-color 140ms ease; } #signin .field:focus-within { border-bottom-color: var(--navy-700); } #signin .field label { display: flex; align-items: baseline; gap: 10px; font-family: var(--lg-mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--lg-ink-4); } #signin .field label i { font-style: normal; color: var(--lg-gold); } #signin .field input { width: 100%; font-size: 19px; padding: 2px 0; border: none; background: transparent; color: var(--navy-900); outline: none; margin: 0; border-radius: 0; } #signin .field__row { display: flex; align-items: center; gap: 12px; } #signin .reveal { flex: 0 0 auto; width: auto; font-family: var(--lg-mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: #5b6b7c; background: none; border: none; padding: 4px 0; cursor: pointer; } #signin .reveal:hover { color: var(--navy-700); } #signin .meta { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; font-size: 13.5px; color: var(--lg-ink-2); } #signin .meta label { display: flex; align-items: center; gap: 10px; cursor: pointer; } #signin .meta input { width: 16px; height: 16px; accent-color: var(--navy-700); cursor: pointer; margin: 0; } #signin .submit { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; padding: 18px 26px; font-size: 16px; font-weight: 700; color: var(--navy-700); background: var(--lg-gold); border: none; border-radius: 4px; cursor: pointer; letter-spacing: .01em; } #signin .submit:hover { background: var(--gold-hi); } #signin .submit:active { transform: translateY(1px); } #signin .submit[disabled] { opacity: .65; cursor: default; } #signin .submit .mono { font-size: 12px; letter-spacing: .12em; opacity: .65; } #signin .pane__foot { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding-top: 20px; border-top: 1px solid var(--lg-line-soft); font-family: var(--lg-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: #93a1b1; } @media (max-width: 900px) { #signin .login { grid-template-columns: 1fr; } #signin .brand-side { padding: 32px 24px; gap: 32px; } #signin .facts { max-width: none; } #signin .pane { padding: 32px 24px; gap: 32px; } #signin .form { max-width: none; } } /* =========================================================================== THE LOBBY — Shan's design, mindgenesis-console.html, 12 August. =========================================================================== Every rule is scoped under #lobby. Not a change to the design: the app already has .panel, .row, .actions, .empty, .name, .stat, .search, .note and .logo doing other jobs on other screens, and an unscoped copy of this file would silently restyle the console, the record and the blueprint. Scoping is what lets the design be taken exactly as drawn. It also has its own palette rather than the shell's tokens, deliberately: this is the front door and it is dark navy and gold whatever theme the app is in. ------------------------------------------------------------------------- */ #lobby { --navy-900: #0d2b47; --navy-700: #14395c; --navy-600: #10314f; --lb-gold: #f2c230; --gold-hi: #ffd450; --lb-bg: #eef2f7; --card: #ffffff; --lb-line: #dde5ee; --lb-line-soft: #eff3f8; --lb-ink: #16202b; --ink-3: #66788b; --ink-4: #8b9aac; --danger: #a03a3a; --danger-soft: #ecd9d9; --lb-serif: "Source Serif 4", Georgia, serif; --lb-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace; --wrap: 1180px; position: absolute; inset: 0; overflow-y: auto; background: var(--lb-bg); color: var(--lb-ink); font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; } #lobby.hidden { display: none; } #lobby .wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 40px; } #lobby ::placeholder { color: #92a1b3; } /* ---- top bar ---- */ #lobby .appbar { position: sticky; top: 0; z-index: 20; background: rgba(255,255,255,.94); backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid var(--lb-line); } #lobby .appbar__rule { height: 3px; background: linear-gradient(90deg, var(--navy-900) 0%, var(--navy-700) 55%, var(--lb-gold) 100%); } #lobby .appbar__inner { display: flex; align-items: center; justify-content: space-between; gap: 32px; padding-top: 18px; padding-bottom: 18px; } #lobby .logo { height: 84px; width: auto; display: block; } /* Wider than it needs to be for the two words in it. A pill sized to its text reads as a chip; this one is the only control in the bar and it is what signs him out. */ #lobby .account { display: flex; align-items: center; gap: 14px; padding: 8px 26px 8px 8px; min-width: 15rem; border: 1px solid #e3eaf3; border-radius: 999px; background: #fff; cursor: pointer; width: auto; } #lobby .account:hover { border-color: var(--navy-700); } #lobby .avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--navy-700); color: #fff; font-size: 14px; font-weight: 600; display: flex; align-items: center; justify-content: center; letter-spacing: .02em; } #lobby .account__text { display: flex; flex-direction: column; text-align: left; } #lobby .account__name { font-size: 14px; font-weight: 600; line-height: 1.3; color: var(--lb-ink); } #lobby .account__role { font-size: 12px; color: #7c8b9c; line-height: 1.3; } /* ---- hero ---- */ #lobby .hero { background: linear-gradient(180deg, var(--navy-900) 0%, var(--navy-700) 100%); } #lobby .hero__inner { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,.85fr); gap: 64px; align-items: center; padding-top: 64px; padding-bottom: 60px; } #lobby .eyebrow { font-family: var(--lb-mono); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--lb-gold); } #lobby .hero h1 { font-family: var(--lb-serif); font-weight: 600; font-size: 58px; line-height: 1.04; margin: 26px 0 0; color: #fff; letter-spacing: -.02em; text-wrap: pretty; } #lobby .hero p { margin: 26px 0 0; font-size: 16.5px; line-height: 1.6; color: #b3c4d6; max-width: 46ch; } #lobby .starter { display: flex; gap: 12px; flex-wrap: wrap; max-width: 620px; margin-top: 26px; } #lobby .starter input { flex: 1 1 320px; min-width: 0; font-size: 16px; padding: 17px 18px; border: 1px solid rgba(255,255,255,.22); border-radius: 12px; background: rgba(255,255,255,.08); color: #fff; outline: none; } #lobby .starter input:focus { border-color: var(--lb-gold); background: rgba(255,255,255,.14); } #lobby .btn-gold { padding: 17px 40px; font-size: 16px; font-weight: 700; color: var(--navy-700); background: var(--lb-gold); border: none; border-radius: 12px; cursor: pointer; width: auto; } #lobby .btn-gold:hover { background: var(--gold-hi); } #lobby .btn-gold:active { transform: translateY(1px); } #lobby .stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.14); border-radius: 16px; overflow: hidden; } #lobby .stat { background: var(--navy-600); padding: 28px 26px; display: flex; flex-direction: column; gap: 8px; } #lobby .stat__label { font-family: var(--lb-mono); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: #8fa5bd; } #lobby .stat--live .stat__label { color: var(--lb-gold); } #lobby .stat__value { font-family: var(--lb-serif); font-size: 40px; font-weight: 600; color: #fff; line-height: 1; } /* ---- the table ---- */ #lobby .section { padding-top: 56px; padding-bottom: 96px; } #lobby .section__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 20px; } #lobby .section__head h2 { font-family: var(--lb-serif); font-weight: 600; font-size: 26px; margin: 0 0 6px; color: var(--navy-900); letter-spacing: -.01em; } #lobby .section__head p { margin: 0; font-size: 14px; color: var(--ink-3); } #lobby .search { flex: 0 1 300px; font-size: 14px; padding: 12px 16px; border: 1px solid #d5dee9; border-radius: 10px; background: #fff; outline: none; } #lobby .search:focus { border-color: var(--navy-700); } #lobby .panel-lb { background: var(--card); border: 1px solid var(--lb-line); border-radius: 18px; overflow: hidden; box-shadow: 0 12px 30px -22px rgba(13,43,71,.35); } #lobby .row { display: grid; grid-template-columns: minmax(0,1fr) 190px 250px; gap: 24px; align-items: center; padding: 20px 30px; border-bottom: 1px solid var(--lb-line-soft); } #lobby .row:last-child { border-bottom: none; } #lobby .row:hover { background: #fafcfe; } #lobby .row--head { padding: 15px 30px; background: #f6f9fc; border-bottom: 1px solid #e4ebf3; font-family: var(--lb-mono); font-size: 11.5px; letter-spacing: .13em; text-transform: uppercase; color: #7f8ea0; } #lobby .row--head span:last-child { text-align: right; } #lobby .cell-account { display: flex; align-items: center; gap: 16px; min-width: 0; } #lobby .mono-badge { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 10px; background: #eef3f9; color: var(--navy-700); font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; } /* The name is what opens the engagement, so it has to look like it does. */ #lobby .cell-open { min-width: 0; cursor: pointer; } #lobby .cell-open:hover .name { color: var(--navy-700); text-decoration: underline; } #lobby .name { font-size: 15.5px; line-height: 1.4; font-weight: 500; color: var(--lb-ink); } #lobby .stamp { font-family: var(--lb-mono); font-size: 12px; color: var(--ink-4); margin-top: 4px; } #lobby .activity { font-size: 14px; color: #33445a; } #lobby .activity small { display: block; font-size: 12.5px; color: var(--ink-4); margin-top: 4px; } #lobby .actions { display: flex; justify-content: flex-end; align-items: center; gap: 8px; margin: 0; } #lobby .btn-ghost { padding: 9px 16px; font-size: 13px; color: var(--navy-700); background: transparent; border: 1px solid #d7dfe9; border-radius: 8px; cursor: pointer; width: auto; } #lobby .btn-ghost:hover { background: #eef3f9; border-color: var(--navy-700); } #lobby .btn-danger-ghost { padding: 9px 16px; font-size: 13px; color: var(--danger); background: transparent; border: 1px solid var(--danger-soft); border-radius: 8px; cursor: pointer; width: auto; } #lobby .btn-danger-ghost:hover { background: #fbf1f1; border-color: var(--danger); } #lobby .btn-danger { padding: 8px 14px; font-size: 13px; font-weight: 600; color: #fff; background: var(--danger); border: none; border-radius: 8px; cursor: pointer; width: auto; } #lobby .btn-danger:hover { background: #8a3030; } #lobby .btn-quiet { padding: 8px 12px; font-size: 13px; color: #5b6b7c; background: transparent; border: 1px solid #d7dfe9; border-radius: 8px; cursor: pointer; width: auto; } #lobby .btn-quiet:hover { background: #f2f5f9; } #lobby .btn-navy { padding: 9px 16px; font-size: 13px; font-weight: 600; color: #fff; background: var(--navy-700); border: none; border-radius: 8px; cursor: pointer; width: auto; } #lobby .btn-navy:hover { background: var(--navy-900); } #lobby .confirm { display: flex; align-items: center; gap: 10px; font-size: 13px; color: #8a3a3a; } #lobby .edit { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } #lobby .edit input { flex: 1 1 260px; min-width: 0; font-size: 15px; padding: 9px 12px; border: 1px solid var(--navy-700); border-radius: 8px; outline: none; margin: 0; } #lobby .empty { padding: 40px 30px; text-align: center; font-size: 14px; color: var(--ink-4); } #lobby .note { margin: 14px 4px 0; font-size: 12.5px; color: #93a1b1; } /* ---- footer ---- */ #lobby .footer { background: var(--navy-900); color: #9db1c6; } #lobby .footer__inner { display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; padding-top: 34px; padding-bottom: 34px; font-size: 13.5px; } #lobby .footer__links { display: flex; align-items: center; gap: 24px; } #lobby .version { font-family: var(--lb-mono); font-size: 12px; color: #6f88a1; } @media (max-width: 980px) { #lobby .hero__inner { grid-template-columns: 1fr; gap: 40px; padding-top: 48px; } #lobby .hero h1 { font-size: 42px; } #lobby .row, #lobby .row--head { grid-template-columns: 1fr; gap: 12px; } #lobby .row--head { display: none; } #lobby .actions { justify-content: flex-start; } #lobby .wrap { padding: 0 20px; } #lobby .logo { height: 64px; } } .link, .accent { color: var(--accent); cursor: pointer; } .just-in { margin-top: 1.4rem; } .tight { margin: 0.4rem 0; } .pre-wrap { white-space: pre-wrap; } .tall { min-height: 7rem; } .flush-top { margin: 0; } .m-top { margin-top: 1rem; } .flush { padding: 0; overflow: hidden; } .pad { padding: 1.2rem; } /* The evidence fold on the prep page. Every line there opens onto the sentence it came from — the fold is the difference between a read and a horoscope. */ .ev { margin-top: .4rem; } .ev summary { font-size: var(--step-fine); color: var(--ink-faint); cursor: pointer; } .ev summary:hover { color: var(--ink); } .ev q { color: var(--ink-mute); } /* =========================================================================== THE BUILD CONSOLE — Shan's design, mindgenesis-build.html, 12 August. =========================================================================== Scoped under #build, like the sign-in and the lobby, because .step, .block, .drop, .log, .checks, .gate and .btn all already mean something else in this file. Scoping is what lets the design be taken exactly as drawn instead of negotiated against the workspace it sits beside. The typefaces are named without a font link on purpose: nginx serves `style-src 'self'` and blocks external hosts, so a Google Fonts is a request that never completes and a silent fallback. These stacks fall to Georgia and the system mono, which is what the rest of the app uses. ------------------------------------------------------------------------- */ #build { --bd-navy-900: #0d2b47; --bd-navy-800: #0a2138; --bd-navy-700: #14395c; --bd-gold: #f2c230; --bd-green: #3f8a5f; --bd-green-lite: #8fd0a8; --bd-sheet: #fff; --bd-shell: #e9edf3; --bd-panel: #f7f9fc; --bd-line: #d3dde8; --bd-line-soft: #e4ebf3; --bd-line-faint: #eff3f8; --bd-ink: #16202b; --bd-ink-2: #33445a; --bd-ink-3: #5b6b7c; --bd-ink-4: #7f8ea0; --bd-ink-5: #a3b0be; --bd-red: #a03a3a; --bd-on-navy: #cfdcea; --bd-on-navy-dim: #6f88a1; --bd-on-navy-mid: #8fa5bd; --bd-serif: "Source Serif 4", Georgia, serif; --bd-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace; --rail: 274px; --rail-min: 56px; --aside: 328px; --aside-min: 48px; position: absolute; inset: 0; overflow: hidden; background: var(--bd-shell); color: var(--bd-ink); font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; } #build.hidden { display: none; } /* THREE OF SHAN'S CLASS NAMES ALREADY MEAN SOMETHING ELSE IN THIS FILE. Scoping under #build stops my rules leaking out. It does nothing about the existing ones leaking in, and what leaked was exactly the properties I had no reason to restate: the app's own `.sheet` is a monospace document box with `max-height: 30rem`, so the middle column of the console stopped dead at 480px with every paragraph set in a typewriter face — on a page that had otherwise painted perfectly. `.gate` is a 22rem column pushed 14vh down the page; `.drop` is a centred square with its own margins. Undone by name, here, BEFORE the design below is applied — anything the design sets again wins on source order, and anything it does not set starts from nothing rather than from somebody else's screen. */ #build .sheet { font: inherit; white-space: normal; color: inherit; margin: 0; padding: 0; border-radius: 0; max-height: none; } #build .drop { margin: 0; border-radius: 0; text-align: left; place-items: initial; transition: none; } #build .gate { max-width: none; margin: 0; padding: 0; } #build button, #build input, #build select { font-family: inherit; } #build ::placeholder { color: #a7b4c3; } #build .mono { font-family: var(--bd-mono); letter-spacing: .12em; text-transform: uppercase; } /* Both edges folded by default: the middle column is the work, and 274px holding a client's name is 274px of not-the-work. */ #build .console { height: 100%; display: grid; grid-template-columns: var(--rail-min) minmax(0,1fr) var(--aside-min); } #build .console.left-open { grid-template-columns: var(--rail) minmax(0,1fr) var(--aside-min); } #build .console.right-open { grid-template-columns: var(--rail-min) minmax(0,1fr) var(--aside); } #build .console.left-open.right-open { grid-template-columns: var(--rail) minmax(0,1fr) var(--aside); } #build .console:not(.left-open) .rail__full, #build .console.left-open .rail__mini, #build .console:not(.right-open) .record__full, #build .console.right-open .record__mini { display: none; } #build .tog { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; font-family: var(--bd-mono); font-size: 13px; border-radius: 2px; cursor: pointer; background: #fff; border: 1px solid var(--bd-line); color: var(--bd-navy-700); } #build .tog:hover { background: #eef3f9; border-color: var(--bd-navy-700); } #build .tog--onnavy { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.16); color: var(--bd-on-navy); } #build .tog--onnavy:hover { background: rgba(255,255,255,.16); color: #fff; } #build .tog--sm { width: 26px; height: 26px; font-size: 12px; flex: 0 0 auto; } #build .vlabel { writing-mode: vertical-rl; font-family: var(--bd-mono); font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--bd-ink-4); } /* ---- left rail ---- */ #build .rail { background: var(--bd-navy-900); display: flex; flex-direction: column; min-width: 0; overflow: hidden; } #build .rail__mini { display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 18px 0; } #build .rail__mini .vlabel { color: var(--bd-on-navy-dim); } #build .rail__full { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; overflow-y: auto; } #build .rail__logo { background: #fff; padding: 18px 20px; border-bottom: 1px solid var(--bd-navy-800); display: flex; align-items: center; justify-content: space-between; gap: 12px; } #build .rail__logo img { height: 54px; width: auto; max-width: 150px; object-fit: contain; object-position: left center; display: block; } #build .block { padding: 20px; border-bottom: 1px solid rgba(255,255,255,.1); display: flex; flex-direction: column; gap: 9px; } #build .block__k { font-family: var(--bd-mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--bd-on-navy-dim); } #build .block__v { font-size: 16px; font-weight: 600; color: #fff; line-height: 1.3; } #build .block__meta { font-family: var(--bd-mono); font-size: 11px; letter-spacing: .06em; color: var(--bd-on-navy-mid); } #build .steps { display: flex; flex-direction: column; border-bottom: 1px solid rgba(255,255,255,.1); } #build .steps__k { padding: 14px 20px 10px; font-family: var(--bd-mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--bd-on-navy-dim); } #build .step-item { display: grid; grid-template-columns: 26px minmax(0,1fr) auto; align-items: center; gap: 12px; padding: 13px 20px; border: none; border-top: 1px solid rgba(255,255,255,.06); border-left: 2px solid transparent; background: none; text-align: left; cursor: pointer; width: 100%; } #build .step-item:hover { background: rgba(255,255,255,.04); } #build .step-item i { font-style: normal; font-family: var(--bd-mono); font-size: 11.5px; color: var(--bd-on-navy-dim); } #build .step-item span { font-size: 13.5px; color: var(--bd-on-navy); min-width: 0; } #build .step-item b { font-family: var(--bd-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; font-weight: 400; color: var(--bd-on-navy-dim); } #build .step-item.is-done { background: rgba(255,255,255,.06); border-left-color: var(--bd-gold); } #build .step-item.is-done i { color: var(--bd-gold); } #build .step-item.is-done span { color: #fff; } #build .step-item.is-done b { color: var(--bd-green-lite); } #build .step-item.is-ready { border-left-color: var(--bd-gold); } #build .step-item.is-ready b { color: var(--bd-gold); } #build .ready__head { display: flex; align-items: baseline; justify-content: space-between; } #build .ready__val { font-family: var(--bd-mono); font-size: 12px; color: var(--bd-gold); } #build .segs { display: grid; grid-template-columns: repeat(3,1fr); gap: 3px; } #build .seg { height: 3px; background: rgba(255,255,255,.16); display: block; } #build .seg.on { background: var(--bd-gold); } #build .rail__mini .segs { display: flex; flex-direction: column; gap: 6px; } #build .rail__mini .seg { width: 8px; height: 8px; } #build .rail__foot { margin-top: auto; padding: 18px 20px; border-top: 1px solid rgba(255,255,255,.1); display: flex; flex-direction: column; gap: 14px; } #build .rail__foot .who { font-size: 13.5px; font-weight: 600; color: #fff; } #build .rail__foot .role { font-family: var(--bd-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--bd-on-navy-dim); } #build .railbtns { display: flex; gap: 1px; background: rgba(255,255,255,.16); } #build .railbtns button { flex: 1 1 auto; padding: 10px 8px; background: var(--bd-navy-900); color: var(--bd-on-navy); border: none; cursor: pointer; font-family: var(--bd-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; } #build .railbtns button:hover { background: var(--bd-navy-700); color: #fff; } #build .railmore { background: none; border: 1px solid rgba(255,255,255,.16); color: var(--bd-on-navy-dim); padding: 8px; cursor: pointer; font-family: var(--bd-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; } #build .railmore:hover { color: #fff; border-color: rgba(255,255,255,.4); } #build .railmore.hidden { display: none; } /* ---- the work sheet ---- */ #build .sheet { background: var(--bd-sheet); border-left: 1px solid var(--bd-line); border-right: 1px solid var(--bd-line); display: flex; flex-direction: column; min-width: 0; overflow-y: auto; } #build .crumbs { border-bottom: 1px solid var(--bd-line); padding: 13px 36px; display: flex; align-items: center; justify-content: space-between; gap: 20px; background: var(--bd-panel); } #build .crumbs .mono { font-size: 11px; color: var(--bd-ink-4); } #build .crumb { background: none; border: none; padding: 0; font: inherit; color: inherit; cursor: pointer; } #build .crumb:hover { color: var(--bd-navy-700); text-decoration: underline; } #build .gate { display: flex; align-items: center; gap: 9px; font-family: var(--bd-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--bd-ink-5); } #build .gate i { width: 6px; height: 6px; background: currentColor; display: block; } #build .gate.is-ready { color: var(--bd-green); } #build .sheet__head { padding: 34px 36px 26px; border-bottom: 1px solid var(--bd-line); display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; flex-wrap: wrap; } #build .sheet__head .mono { font-size: 10.5px; letter-spacing: .18em; color: #8b9aac; } #build .sheet__head h1 { font-family: var(--bd-serif); font-weight: 600; font-size: 38px; line-height: 1.05; margin: 10px 0 0; color: var(--bd-navy-900); letter-spacing: -.02em; } #build .sheet__head p { margin: 0 0 5px; font-size: 14px; color: #66788b; } #build .step { border-bottom: 1px solid var(--bd-line-soft); padding: 26px 36px; display: grid; grid-template-columns: 34px minmax(0,1fr) 170px; gap: 22px; align-items: start; background: #fff; } #build .step.is-done { background: #fcfdfe; } #build .gutter { display: flex; flex-direction: column; align-items: center; gap: 8px; align-self: stretch; } #build .gutter .mark { width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; border: 1px solid #c9d5e2; background: #fff; color: #8b9aac; font-family: var(--bd-mono); font-size: 11px; } #build .step.is-done .gutter .mark { background: var(--bd-navy-700); border-color: var(--bd-navy-700); color: #fff; } #build .gutter .line { flex: 1 1 auto; width: 1px; background: var(--bd-line-soft); display: block; } #build .step__body { min-width: 0; display: flex; flex-direction: column; gap: 14px; } #build .step__body h2 { font-family: var(--bd-serif); font-weight: 600; font-size: 22px; margin: 0; color: var(--bd-navy-900); } #build .step__body p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--bd-ink-3); } #build .step__meta { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; text-align: right; } #build .step__meta .state { font-family: var(--bd-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--bd-ink-5); } #build .step.is-done .step__meta .state { color: var(--bd-green); } #build .step__meta .owner { font-family: var(--bd-mono); font-size: 11px; color: var(--bd-ink-5); } #build .drop { border: 1px dashed #c9d5e2; background: #fbfcfe; padding: 18px 20px; display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; } #build .drop.is-over { border-color: var(--bd-navy-700); background: #f2f7fc; } #build .drop .mono { font-size: 11.5px; letter-spacing: .06em; color: var(--bd-ink-4); text-transform: none; } #build .btn { padding: 12px 20px; font-family: var(--bd-mono); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; color: #fff; background: var(--bd-navy-700); border: none; border-radius: 2px; cursor: pointer; } #build .btn:hover { background: var(--bd-navy-900); } #build .btn:active { transform: translateY(1px); } #build .btn[disabled] { background: #eef2f7; color: var(--bd-ink-5); cursor: default; } #build .btn--quiet { color: var(--bd-navy-700); background: #fff; border: 1px solid #c9d5e2; } #build .btn--quiet:hover { background: #f2f6fa; border-color: var(--bd-navy-700); } #build .btn--quiet[disabled] { background: #f2f5f9; border-color: var(--bd-line-soft); color: var(--bd-ink-5); } /* One row per file, and — where a file has to be attributed before it can be read — the picker that attributes it. Rows, not a list, because each one carries a state and sometimes a question. */ #build .filelist { border: 1px solid var(--bd-line-soft); } #build .filerow { display: grid; grid-template-columns: 62px minmax(0,1fr) auto; gap: 14px; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--bd-line-faint); font-size: 13px; color: var(--bd-ink-2); } #build .filerow:last-child { border-bottom: none; } #build .filerow .tag { font-family: var(--bd-mono); font-size: 10.5px; letter-spacing: .1em; color: var(--bd-ink-4); } #build .filerow.ok .tag { color: var(--bd-green); } #build .filerow.bad .tag { color: var(--bd-red); } #build .filerow .nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #build .filerow .sz { font-family: var(--bd-mono); font-size: 11px; color: #93a1b1; text-align: right; } #build .filerow .why { grid-column: 2 / -1; font-size: 12.5px; color: var(--bd-ink-4); } #build .filerow select { padding: 6px 8px; font-size: 12.5px; border: 1px solid #c9d5e2; background: #fff; color: var(--bd-ink); border-radius: 2px; } /* The eighteen, as eighteen. A letter in each, so a gap is a named area rather than a gap — "D is missing" is actionable and "one of them is missing" is not. */ #build .ticks { display: grid; grid-template-columns: repeat(18,minmax(0,1fr)); gap: 2px; border: 1px solid var(--bd-line-soft); padding: 5px; } #build .ticks span { height: 22px; background: #eef2f7; display: flex; align-items: center; justify-content: center; font-family: var(--bd-mono); font-size: 9.5px; color: #b6c1cd; } #build .ticks span.on { background: var(--bd-gold); color: var(--bd-navy-900); } #build .ticks span.busy { background: #fdf0c6; color: var(--bd-navy-700); } #build .inline { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } #build .inline .mono { font-size: 11.5px; letter-spacing: .1em; color: #93a1b1; } #build .warn { color: var(--bd-red); } /* Who has filed and who has not, and per person the one thing to do about it. */ #build .who-list { display: flex; flex-direction: column; border: 1px solid var(--bd-line-soft); } #build .who-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 11px 14px; border-bottom: 1px solid var(--bd-line-faint); font-size: 13.5px; } #build .who-row:last-child { border-bottom: none; } #build .who-row .nm { color: var(--bd-ink); } #build .who-row .st { font-family: var(--bd-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--bd-ink-5); } #build .who-row.in .st { color: var(--bd-green); } #build .who-row .link { background: none; border: none; padding: 0; cursor: pointer; font-family: var(--bd-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--bd-navy-700); } #build .who-row .link:hover { text-decoration: underline; } /* ---- the research row ---- */ #build .research { border-top: 1px solid var(--bd-line-soft); padding-top: 16px; display: grid; grid-template-columns: 92px minmax(0,1fr); gap: 20px; align-items: start; } #build .research__k { font-family: var(--bd-mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--bd-ink-5); padding-top: 3px; } #build .research__body { min-width: 0; display: flex; flex-direction: column; gap: 12px; } #build .research__line { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; font-size: 14.5px; color: var(--bd-ink-2); } #build .research__state { font-family: var(--bd-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: #8a6a12; } #build .research__note { font-size: 13.5px; color: #7d8b9b; } #build .research.is-locked .research__line { color: #93a1b1; } #build .research.is-locked .research__state { color: var(--bd-ink-5); } #build .research.is-done .research__state { color: var(--bd-green); } #build .research.is-failed .research__state { color: var(--bd-red); } /* THE BAR IS TWO THINGS AND SHOWS THEM AS TWO THINGS. Solid is finished work — questions with findings written against them. The hatched piece is the one in flight, drawn from how far into it we are against the pace this run has actually measured. It is an estimate and it is drawn like one, so the bar can move every second without ever claiming to have finished something it has not. */ #build .runbar { display: flex; flex-direction: column; gap: 10px; padding-top: 2px; } /* A class with display on it beats the browser's own [hidden] rule, so `hidden` in the markup did nothing and an empty progress bar sat under step two on every engagement — including ones with no research and no job to have one. */ #build .runbar[hidden] { display: none; } #build .runbar .track { height: 6px; background: #e7edf4; display: flex; overflow: hidden; } #build .runbar .done { display: block; height: 100%; width: 0; background: var(--bd-gold); transition: width 400ms linear; } #build .runbar .doing { display: block; height: 100%; width: 0; transition: width 1s linear; background: repeating-linear-gradient(135deg, #f6d670 0 6px, #fbeab4 6px 12px); background-size: 17px 17px; animation: bd-crawl 1.1s linear infinite; } @keyframes bd-crawl { from { background-position: 0 0; } to { background-position: 17px 0; } } @media (prefers-reduced-motion: reduce) { #build .runbar .doing { animation: none; } #build .runbar .done, #build .runbar .doing { transition: none; } } #build .runbar .status { font-size: 14.5px; color: var(--bd-ink-2); } #build .runbar .status b { font-weight: 700; } #build .runbar .doing-what { font-size: 13.5px; color: var(--bd-ink-3); min-height: 1.2em; } #build .runbar .server { font-size: 13px; color: #7d8b9b; } #build .runbar .slow { color: #8a6a12; } #build .clock { font-family: var(--bd-mono); font-size: 12.5px; letter-spacing: .06em; color: var(--bd-ink-4); font-variant-numeric: tabular-nums; } /* ---- step four ---- */ #build .buildbar { margin-top: auto; border-top: 1px solid var(--bd-line); background: var(--bd-panel); padding: 26px 36px; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; } #build .buildbar.is-ready { background: #fffaeb; } #build .buildbar .mono { font-size: 10px; letter-spacing: .16em; color: var(--bd-ink-5); } #build .buildbar.is-ready .mono { color: #8a6a12; } #build .buildbar h2 { font-family: var(--bd-serif); font-size: 22px; font-weight: 600; margin: 6px 0; color: #8b9aac; } #build .buildbar.is-ready h2 { color: var(--bd-navy-900); } #build .buildbar p { margin: 0; font-size: 13.5px; color: #7d8b9b; max-width: 62ch; } #build .build { padding: 17px 36px; font-family: var(--bd-mono); font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: var(--bd-ink-5); background: #eef2f7; border: 1px solid #dbe3ec; border-radius: 2px; cursor: default; } #build .buildbar.is-ready .build { color: var(--bd-navy-700); background: var(--bd-gold); border-color: var(--bd-gold); cursor: pointer; } #build .buildbar.is-ready .build:hover { filter: brightness(1.04); } /* What building produced, listed as files because that is what Day 3 asks for. */ #build .built { border: 1px solid var(--bd-line-soft); } #build .built div { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 14px; align-items: center; padding: 9px 14px; border-bottom: 1px solid var(--bd-line-faint); font-size: 13px; } #build .built div:last-child { border-bottom: none; } #build .built .nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--bd-ink-2); } #build .built button { background: none; border: none; padding: 0; cursor: pointer; font-family: var(--bd-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--bd-navy-700); } #build .built button:hover { text-decoration: underline; } /* ---- right panel: the record, and what has happened in it ---- */ #build .record { background: var(--bd-panel); border-left: 1px solid var(--bd-line); display: flex; flex-direction: column; min-width: 0; overflow: hidden; } #build .record__mini { display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 18px 0; } #build .record__full { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; overflow-y: auto; } #build .record__head { padding: 13px 22px; border-bottom: 1px solid var(--bd-line); display: flex; align-items: center; justify-content: space-between; gap: 12px; } #build .record__head .mono { font-size: 11px; letter-spacing: .14em; color: var(--bd-ink-4); } #build .kv { padding: 18px 22px; border-bottom: 1px solid #e7edf4; display: flex; flex-direction: column; gap: 12px; } #build .kv div { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; } #build .kv .k { font-size: 13px; color: #66788b; } #build .kv .v { font-family: var(--bd-mono); font-size: 12px; color: var(--bd-ink); text-align: right; } #build .subhead { padding: 13px 22px; border-bottom: 1px solid var(--bd-line); font-family: var(--bd-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--bd-ink-4); } #build .log { flex: 1 1 auto; display: flex; flex-direction: column; } #build .log div { padding: 14px 22px; border-bottom: 1px solid #e7edf4; display: flex; flex-direction: column; gap: 5px; } #build .log .t { font-family: var(--bd-mono); font-size: 10.5px; letter-spacing: .1em; color: var(--bd-ink-4); } #build .log .t.ok { color: var(--bd-green); } #build .log .t.build { color: #8a6a12; } #build .log .x { font-size: 13.5px; line-height: 1.5; color: var(--bd-ink-2); } #build .log .none { color: var(--bd-ink-4); font-size: 13px; } #build .checks { padding: 18px 22px; border-top: 1px solid var(--bd-line); display: flex; flex-direction: column; gap: 12px; } #build .checks .mono { font-size: 10px; letter-spacing: .16em; color: var(--bd-ink-4); } #build .checks label { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--bd-ink-2); } #build .checks i { width: 14px; height: 14px; border: 1px solid #c9d5e2; background: #fff; display: block; flex: 0 0 auto; } #build .checks i.on { background: var(--bd-navy-700); border-color: var(--bd-navy-700); } #build .copyright { font-family: var(--bd-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--bd-ink-5); padding-top: 8px; border-top: 1px solid #e7edf4; } @media (max-width: 68rem) { #build { position: static; overflow: visible; } #build .console, #build .console.left-open, #build .console.right-open, #build .console.left-open.right-open { height: auto; grid-template-columns: 1fr; } #build .rail__mini, #build .record__mini { flex-direction: row; justify-content: space-between; padding: 12px 20px; } #build .vlabel { writing-mode: horizontal-tb; } #build .step { grid-template-columns: 34px minmax(0,1fr); gap: 16px; } #build .step__meta { grid-column: 2; align-items: flex-start; text-align: left; } #build .crumbs, #build .sheet__head, #build .step, #build .buildbar { padding-left: 20px; padding-right: 20px; } #build .ticks { grid-template-columns: repeat(9,minmax(0,1fr)); } } /* The moment between clicking a client and their record arriving. Not a .step: it is not one, and it must not be counted as one. */ #build .opening { padding: 26px 36px; border-bottom: 1px solid var(--bd-line-soft); } #build .opening p { margin: 0; font-size: 14.5px; color: var(--bd-ink-4); } /* Their logins, on the Start screen — the rows app.js draws under the one-line name field. Same dark lobby surface as .starter above it, so it reads as part of the same act rather than a form that appeared. */ #lobby .accounts { max-width: 620px; margin-top: 18px; } #lobby .accounts__lead { margin: 0 0 12px; font-size: 13px; line-height: 1.5; color: rgba(255,255,255,.62); } #lobby .accounts__row { display: grid; grid-template-columns: minmax(90px,1fr) minmax(0,1.6fr) minmax(0,1.2fr) auto; gap: 8px; align-items: center; margin-bottom: 8px; } #lobby .accounts__name { font-size: 14px; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #lobby .accounts__row input { min-width: 0; font-size: 14px; padding: 11px 12px; border-radius: 10px; border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.08); color: #fff; outline: none; } #lobby .accounts__row input:focus { border-color: var(--lb-gold); background: rgba(255,255,255,.14); } #lobby .accounts__row input[data-f="password"] { font-family: ui-monospace, Menlo, monospace; letter-spacing: .04em; } #lobby .accounts__new { padding: 10px 12px; border-radius: 10px; cursor: pointer; font-size: 14px; border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.08); color: rgba(255,255,255,.8); } #lobby .accounts__new:hover { border-color: var(--lb-gold); color: #fff; } @media (max-width: 620px) { #lobby .accounts__row { grid-template-columns: 1fr auto; } #lobby .accounts__name { grid-column: 1 / -1; } } /* The lobby's two head controls. .search used to be a direct child of .section__head and is now beside a button inside this wrapper, so the flex-end alignment moves here with it. */ #lobby .head-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } #lobby .lb-btn { font-size: 14px; padding: 12px 18px; border-radius: 10px; cursor: pointer; border: 1px solid #d5dee9; background: #fff; color: var(--navy-700); white-space: nowrap; } #lobby .lb-btn:hover { border-color: var(--navy-700); color: var(--navy-900); } /* ============================================================ Accounts & sessions — the client-logins ledger ============================================================ From the designer's "mindgenesis-accounts", changed in the two mechanical ways the rest of this codebase uses: every class carries an ac- prefix and every rule is scoped under .acx. Both are necessary here rather than tidy. The drawing's class names are .row .who .mail .state .band .empty .more .act — and the lobby this renders into already has .row, .search and .empty of its own, with the workspace carrying more. Unprefixed, the ledger would have repainted the sessions list it sits next to. .tally→.ac-tally .note→.ac-note .controls→.ac-controls .filters→.ac-filters .seek→.ac-seek .ledger→.ac-ledger .ledger__cols→.ac-cols .band→.ac-band .row→.ac-row .who→.ac-who .av→.ac-av .nm→.ac-nm .rename→.ac-rename .mail→.ac-mail .eng→.ac-eng .state→.ac-state .more→.ac-more .acts→.ac-acts .act→.ac-act .pw→.ac-pw .confirm→.ac-confirm .ledger__end→.ac-end .empty→.ac-empty NOT COPIED: .mast, .head and .foot — the page chrome the README says to drop, since this renders inside a console that already has all three. The palette is restated locally rather than referencing --mg-*, because this sheet serves the lobby, which is not under .mg. */ .acx{ --ac-navy-900:#0d2b47; --ac-navy-700:#14395c; --ac-gold:#F2C230; --ac-gold-ink:#8a6a12; --ac-gold-bg:#fffaeb; --ac-green:#3f8a5f; --ac-red:#a03a3a; --ac-red-bg:#fdf5f5; --ac-panel:#f7f9fc; --ac-line:#d7e0ea; --ac-line-soft:#e4ebf3; --ac-line-faint:#eff3f8; --ac-ink:#16202b; --ac-ink-2:#33445a; --ac-ink-3:#5b6b7c; --ac-ink-4:#7f8ea0; --ac-ink-5:#a3b0be; --ac-ink-6:#bcc7d4; --ac-serif:'Source Serif 4',Georgia,serif; --ac-mono:'IBM Plex Mono',ui-monospace,monospace; color:var(--ac-ink); } .acx *{box-sizing:border-box} .acx input,.acx button{font-family:inherit} .acx ::placeholder{color:var(--ac-ink-5)} /* the count strip — rules, not cards */ .acx .ac-tally{border-top:2px solid var(--ac-navy-900);border-bottom:1px solid var(--ac-line-soft); display:grid;grid-template-columns:repeat(3,minmax(0,1fr))} .acx .ac-tally__cell{padding:18px 24px 18px 0;display:flex;flex-direction:column;gap:5px;border-right:1px solid var(--ac-line-faint)} .acx .ac-tally__cell:first-child{padding-left:0} .acx .ac-tally__cell:not(:first-child){padding-left:28px} .acx .ac-tally__cell:last-child{border-right:none} .acx .ac-tally__n{font-family:var(--ac-serif);font-size:38px;font-weight:600;line-height:1;color:var(--ac-navy-900); letter-spacing:-.02em;display:flex;align-items:baseline;gap:10px} .acx .ac-tally__n i{width:6px;height:6px;display:block;flex:0 0 auto;position:relative;top:-8px} .acx .ac-tally__cell--gold .ac-tally__n{color:var(--ac-gold-ink)} .acx .ac-tally__cell--gold i{background:var(--ac-gold)} .acx .ac-tally__cell--grey i{background:var(--ac-ink-6)} .acx .ac-tally__cell--green i{background:var(--ac-green)} .acx .ac-tally__l{font-family:var(--ac-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ac-ink-4)} /* a condition of this machine, so it reads as a marginal note rather than an alert */ .acx .ac-note{margin-top:22px;display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;align-items:baseline} .acx .ac-note__k{font-family:var(--ac-mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase; color:var(--ac-gold-ink);border-left:2px solid var(--ac-gold);padding-left:12px} .acx .ac-note__t{font-size:15px;line-height:1.6;color:var(--ac-ink-3);max-width:82ch} .acx .ac-note__t b{font-weight:600;color:var(--ac-ink)} .acx .ac-controls{margin-top:32px;display:flex;align-items:center;justify-content:space-between;gap:24px; flex-wrap:wrap;padding-bottom:12px} .acx .ac-filters{display:flex;align-items:center;border:1px solid var(--ac-line);background:#fff} .acx .ac-filters button{padding:10px 15px;font-family:var(--ac-mono);font-size:10px;letter-spacing:.13em; text-transform:uppercase;color:var(--ac-ink-4);background:transparent;border:none; border-right:1px solid var(--ac-line-soft);cursor:pointer;display:flex;align-items:center;gap:8px} .acx .ac-filters button:last-child{border-right:none} .acx .ac-filters button:hover{color:var(--ac-navy-700);background:var(--ac-panel)} .acx .ac-filters button.is-on{color:var(--ac-navy-900);background:var(--ac-gold-bg);box-shadow:inset 0 -2px 0 var(--ac-gold)} .acx .ac-filters button .n{font-family:var(--ac-mono);font-size:9.5px;letter-spacing:.06em;color:var(--ac-ink-5)} .acx .ac-filters button.is-on .n{color:var(--ac-gold-ink)} .acx .ac-seek{display:flex;align-items:center;gap:10px;flex:0 1 340px;border:1px solid var(--ac-line);background:#fff;padding:9px 12px} .acx .ac-seek:focus-within{border-color:var(--ac-navy-700)} .acx .ac-seek input{flex:1 1 auto;min-width:0;font-size:14px;border:none;background:transparent;color:var(--ac-ink);outline:none} .acx .ac-seek .k{font-family:var(--ac-mono);font-size:10px;letter-spacing:.08em;color:var(--ac-ink-5); border:1px solid var(--ac-line-soft);padding:2px 5px} /* the ledger */ .acx .ac-ledger{border-top:1px solid var(--ac-line);margin-bottom:40px} .acx .ac-cols,.acx .ac-row{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1.25fr) minmax(0,1.7fr) 190px 44px;gap:26px;align-items:center} .acx .ac-cols{padding:11px 12px;background:var(--ac-panel);border-bottom:1px solid var(--ac-line)} .acx .ac-cols span{font-family:var(--ac-mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ac-ink-4)} .acx .ac-band{display:flex;align-items:baseline;gap:16px;padding:34px 12px 12px;border-bottom:1px solid var(--ac-line-soft)} .acx .ac-band h2{font-family:var(--ac-serif);font-weight:600;font-size:24px;line-height:1.15;margin:0; color:var(--ac-navy-900);letter-spacing:-.016em} .acx .ac-band p{margin:0;font-size:14.5px;line-height:1.5;color:var(--ac-ink-4);max-width:70ch} .acx .ac-row{padding:16px 12px;border-bottom:1px solid var(--ac-line-faint);position:relative;cursor:default;outline:none} .acx .ac-row:hover,.acx .ac-row.is-open,.acx .ac-row:focus-visible{background:var(--ac-panel)} .acx .ac-row:hover::before,.acx .ac-row.is-open::before,.acx .ac-row:focus-visible::before{content:""; position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--ac-gold)} .acx .ac-row--last{border-bottom:1px solid var(--ac-line)} .acx .ac-who{min-width:0;display:flex;align-items:center;gap:12px} .acx .ac-av{width:28px;height:28px;border-radius:50%;flex:0 0 auto;background:#e7edf5;color:var(--ac-navy-700); font-family:var(--ac-mono);font-size:10px;font-weight:600;display:flex;align-items:center;justify-content:center} .acx .ac-nm{min-width:0;font-size:16px;color:var(--ac-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .acx .ac-rename{display:none;margin-left:auto;flex:0 0 auto;font-family:var(--ac-mono);font-size:9.5px; letter-spacing:.14em;text-transform:uppercase;color:var(--ac-ink-5);background:transparent;border:none;cursor:pointer;padding:2px} .acx .ac-row:hover .ac-rename,.acx .ac-row:focus-within .ac-rename{display:block} .acx .ac-rename:hover{color:var(--ac-navy-700)} .acx .ac-who input{min-width:0;width:100%;font-size:16px;color:var(--ac-ink);background:#fff; border:1px solid var(--ac-navy-700);padding:6px 9px;outline:none} .acx .ac-mail{min-width:0;font-family:var(--ac-mono);font-size:12.5px;color:var(--ac-ink-3); white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .acx .ac-mail--none{color:var(--ac-ink-6);text-transform:uppercase;letter-spacing:.14em;font-size:9.5px} .acx .ac-eng{min-width:0;font-size:15px;line-height:1.4;color:var(--ac-navy-700);cursor:pointer;text-wrap:pretty} .acx .ac-eng:hover{color:var(--ac-navy-900);text-decoration:underline;text-underline-offset:3px} .acx .ac-state{display:flex;align-items:center;gap:9px;font-family:var(--ac-mono);font-size:9.5px; letter-spacing:.14em;text-transform:uppercase} .acx .ac-state i{width:6px;height:6px;display:block;flex:0 0 auto} .acx .ac-state--own{color:var(--ac-green)} .acx .ac-state--own i{background:var(--ac-green)} .acx .ac-state--never{color:var(--ac-gold-ink)} .acx .ac-state--never i{background:var(--ac-gold)} .acx .ac-state--nologin{color:var(--ac-ink-5)} .acx .ac-state--nologin i{background:transparent;box-shadow:inset 0 0 0 1px var(--ac-ink-6)} .acx .ac-more{justify-self:end;width:30px;height:30px;font-family:var(--ac-mono);font-size:13px;color:var(--ac-ink-5); background:transparent;border:1px solid transparent;border-radius:2px;cursor:pointer;opacity:0} .acx .ac-row:hover .ac-more,.acx .ac-row:focus-within .ac-more,.acx .ac-row.is-open .ac-more{opacity:1} .acx .ac-more:hover,.acx .ac-row.is-open .ac-more{color:var(--ac-navy-700);border-color:var(--ac-line);background:#fff} /* the action strip — only ever one row's worth on screen */ .acx .ac-acts{grid-column:1 / -1;display:flex;align-items:center;gap:8px;flex-wrap:wrap; margin:14px 0 2px;padding-top:14px;border-top:1px solid var(--ac-line-soft)} .acx .ac-acts__k{font-family:var(--ac-mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase; color:var(--ac-ink-5);margin-right:6px} .acx .ac-act{padding:9px 15px;font-family:var(--ac-mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase; color:var(--ac-navy-700);background:#fff;border:1px solid var(--ac-line);border-radius:2px;cursor:pointer} .acx .ac-act:hover:not([disabled]){background:var(--ac-gold-bg);border-color:var(--ac-gold)} .acx .ac-act--danger{color:var(--ac-red);margin-left:auto} .acx .ac-act--danger:hover{background:var(--ac-red-bg);border-color:#e2c2c2} .acx .ac-act[disabled]{color:var(--ac-ink-6);background:var(--ac-panel);border-color:var(--ac-line-soft);cursor:default} .acx .ac-acts__why{font-family:var(--ac-mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ac-ink-6)} /* a generated password, shown to be read out loud */ .acx .ac-pw{grid-column:1 / -1;margin:12px 0 2px;border-left:2px solid var(--ac-gold);background:var(--ac-gold-bg); padding:14px 18px;display:flex;align-items:center;gap:20px;flex-wrap:wrap} .acx .ac-pw__k{font-family:var(--ac-mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ac-gold-ink)} .acx .ac-pw__v{font-family:var(--ac-mono);font-size:22px;letter-spacing:.1em;color:var(--ac-navy-900)} .acx .ac-pw__x{margin-left:auto;font-family:var(--ac-mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase; color:var(--ac-ink-4);background:transparent;border:none;cursor:pointer} .acx .ac-pw__x:hover{color:var(--ac-navy-700)} /* the confirmation is the row, not a modal */ .acx .ac-row.is-doomed{background:var(--ac-red-bg)} .acx .ac-row.is-doomed::before{background:var(--ac-red)} .acx .ac-confirm{grid-column:1 / -1;margin:14px 0 2px;padding-top:14px;border-top:1px solid #eddcdc; display:flex;align-items:center;gap:16px;flex-wrap:wrap} .acx .ac-confirm p{margin:0;font-size:15px;line-height:1.5;color:var(--ac-ink-2);max-width:64ch} .acx .ac-confirm p b{color:var(--ac-red)} .acx .ac-go{padding:10px 18px;font-family:var(--ac-mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase; font-weight:600;color:#fff;background:var(--ac-red);border:none;border-radius:2px;cursor:pointer} .acx .ac-go:hover{background:#8d3131} .acx .ac-no{font-family:var(--ac-mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--ac-ink-4); background:transparent;border:none;cursor:pointer} .acx .ac-no:hover{color:var(--ac-navy-700)} .acx .ac-end{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:16px 12px;flex-wrap:wrap} .acx .ac-end span{font-family:var(--ac-mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ac-ink-5)} .acx .ac-empty{padding:40px 12px;font-family:var(--ac-serif);font-size:22px;color:var(--ac-ink-5)} @media (max-width:1180px){ .acx .ac-tally{grid-template-columns:1fr} .acx .ac-tally__cell{border-right:none;border-bottom:1px solid var(--ac-line-faint);padding-left:0!important} .acx .ac-cols{display:none} .acx .ac-row{grid-template-columns:1fr;gap:8px;padding:18px 12px} .acx .ac-more{display:none} .acx .ac-acts{display:flex} .acx .ac-rename{display:block} }