/* ============================================================================ BLUE VISION AI — application stylesheet. Ported from Docs/ui-templates/nova-pro.html, the approved design direction (D-36). This is the ONLY stylesheet: every screen is written against the vocabulary below rather than against per-page classes, so a design change is made here once instead of in fifteen files. Two deliberate differences from the template: - The preview chrome (.pv*, the screen switcher and accent dots) is gone. It was review scaffolding and the template says so itself. - The default accent is named "ink" rather than "indigo", because that is the value the appearance.default-accent setting has always stored. The colours are unchanged. Everything after "BLUE VISION ADDITIONS" at the end is ours: the template covers home, workspace, compare, pricing and analytics, but has no auth or admin screens. Those are built from the primitives above, not from a second style. ============================================================================ */ /* ============================================================================ NOVA PRO (v4) Shell: WIDE LABELLED LEFT SIDEBAR, light chrome, card-based panels. (Aurora Pro deliberately uses a different shell — a narrow icon rail with a dark chrome panel — so the two are structurally distinct, not just recoloured.) v4 changes: left navigation on every screen · three independently collapsible side panels, all persisted · light theme by default. Chart palette validated with the dataviz validator (light + dark). Logical properties throughout => RTL-ready. ============================================================================ */ :root { /* The hologram's dark stage, the same in both themes (Agent 11, 18 Oct): one token, not a colour in each rule. */ --holo-stage: #070b12; /* THE STAGE (Syed, R219, 19 Oct): ONE shared dark panel for live state - Ambient's field first, Holo after. Dark in BOTH themes, so its three status colours are NETFIVE's own DARK-THEME values (--status-working, --warning, --ok in [data-theme="dark"]), not var() of the light ones; StageTokensTests pins each to the dark block. Ink 13.1:1 and muted 5.3:1 on --stage. */ --stage: #061020; --stage-deep: #040A16; --stage-line: rgba(130, 165, 215, .16); --stage-structure: #246BDE; --stage-ink: #C2D8F2; --stage-muted: #78889E; --stage-working: #5EA7FF; --stage-needs-you: #FBBF24; --stage-complete: #3ECF8E; /* ---- surfaces ---- */ /* Warm paper, like Serene — it is what makes both feel expensive. Nova keeps a DISTINCT accent (deep ink, not terracotta) so the two directions never collapse into the same product at a glance. */ /* THE WHOLE LADDER MOVES TOGETHER. Deepened from #f7f6f2 on the client's call ("too light, hard to see things") - and the first attempt moved --bg alone, which was wrong: --surface-3 was #f0eee8, so once the paper reached #f1efe8 the hover tone and the page were 1.005:1 apart and every hover state in the light theme quietly stopped existing. The text was never the problem - #1c1b19 on paper is about 14.5:1 here. The STRUCTURE was, and structure is a ladder, not one value: white card on paper 1.08 -> 1.19 border on paper 1.16 -> 1.26 border inside a card 1.20 -> 1.50 hover on a card 1.10 -> 1.22 selected on a panel 1.10 -> 1.29 Same warm paper (D-36) - the hue is unchanged, only the distance from white. Every surface in the product is drawn from these six values, so this is the entire change; there is no page that needs touching afterwards. */ --bg: #eeebe3; --surface: #ffffff; --surface-2: #f8f6f0; --surface-3: #ece8dd; --surface-4: #dfdacb; --border: #d8d3c4; --border-strong: #c9c2b0; --text: #1c1b19; --muted: #5d5a54; --faint: #6e6b63; /* ---- accent (swappable) ---- */ /* THE BASE VALUE, used when no [data-accent] preset matches - a stale name cached in a browser from before a prune, most of all. It held #34478c, which is the INK accent, because that was the default when this line was written. So a page that selected nothing silently painted ink: a colour nobody chose, with the picker showing nothing selected and every screen looking perfectly fine. It is indigo now, which is the default, so the fallback and the default are the same colour by construction rather than by coincidence. The guard in _Layout substitutes the default for an unrecognised accent before first paint, so this should never be reached. It is the second line of defence, and a second line that points somewhere else is worse than none. */ --accent: #AF1E33; --accent-hover: #951A2C; --accent-soft: #FBEDEF; --accent-line: #F2C9CF; --on-accent: #ffffff; /* The accent as a filled surface with text on it. It is the accent itself unless a theme and accent together need a different one to keep the text readable — see ruby in the dark theme below. */ --accent-fill: var(--accent); --accent-fill-hover: var(--accent-hover); /* ---- status (fixed, never themed) ---- TWO values for the two statuses that are printed as words, and the split is not tidying - it is the fix for the client's second complaint ("the yellow one needs more contrast"). --critical needs no pair: #d03b3b is 4.8:1 on a card, which already passes. --ok / --warning / --critical the SHAPE colour: a meter fill, a dot, a border, a star. Sits on a large area, so it only has to be recognisable. --ok-fg / --warning-fg / … the TEXT colour, on a light ground. They cannot be the same value in the light theme. #fab219 on white is 1.83:1 - the sentence under the composer telling somebody to pick an answer was, measured, the least legible text in the product. The darkened amber is 5.54:1 on a card and 4.65:1 on paper, so it passes AA on both grounds a warning is ever printed on. --ok had the same defect more quietly: 3.35:1, under AA for body text, on every "included"/"up" line in pricing and usage. Four files already worked around this by hard-coding #8a6100 beside a [data-theme="dark"] override; those are now one token. In the dark theme the fg IS the shape colour - a light-on-dark page wants the bright amber. */ --ok: #0ca30c; --ok-fg: #0a7d0a; --ok-bg: #eaf7ea; --warning: #fab219; --warning-fg:#8a6100; --warning-bg:#fdf5e4; --critical: #d03b3b; --critical-bg:#fdeeee; /* ---- the six status words, as named colours (shell handover step 2) ---- THE STATUS LANGUAGE NEEDS ITS OWN PALETTE, and this is the whole of what the handover asked for: the six exist as named things, carrying the live values. No new colours. WHY NAMING THEM IS NOT COSMETIC. The marks pointed straight at --ok, --warning, --muted, --critical and --accent, which means the status language had no palette of its own and moved whenever any of those moved for an unrelated reason. Five of the six were harmless. The sixth was not: --accent IS THE PERSON'S CHOICE. The ruby preset set it to #e11d33 while --critical was #d03b3b, so anybody on the ruby accent had a RED "Working" mark beside a red "Failed" one. Not a colour-alone failure - ● and ✕ are different shapes and both carry their word - but a colour actively saying the wrong thing, which is worse than a colour saying nothing. Working is a fixed blue here and no longer follows whatever the person picked. RUBY LEFT THE PALETTE ON 6 OCTOBER, measured at 1-4 degrees from failure, so the collision cannot be re-chosen. Both halves were worth keeping: this token stops the MARK following an accent, and the prune stops an accent BEING the failure colour. Either alone leaves the other fault reachable - a future accent 4 degrees from red would be a red Publish beside a red cross even with Working held fixed. THE OTHER FIVE ARE var() DELIBERATELY, so they stay in step with the palette they were drawn from instead of becoming five hex values nobody remembers to change. They resolve against whichever declaration wins ON THIS ELEMENT, so the dark theme's values flow through without a second set of declarations - [data-theme="dark"] is on , the same element as :root. The consequence to know: a component scope that redefines --muted for itself (.ca-mount, .bw-mount, .dk .nf-app) does NOT shift the status marks inside it, which is right - one status language looks the same everywhere. */ /* THE DESIGNED COBALT, restored 6 October. It held #34478c / #8f9ce8 - which is --a-ink, the accent, exactly. HOW IT GOT THERE, and the rule that comes out of it: this token was once `var(--accent)`, which gave anybody on the ruby accent a red Working mark beside a red Failed one. De-aliasing it fixed the MECHANISM and pinned the VALUE to whatever the accent happened to resolve to at that moment. Half a fix, and the half that landed was the half anybody would check. DE-ALIASING A TOKEN IS TWO EDITS: the mechanism AND the value. A test that asserts only the property - "the mark does not follow the accent" - passes on the broken value, so the fault goes on wearing the fix as proof. WHAT IT COST. The spec separates Working from Scheduled by saturation, motion and the word. --dk-tier-deep was holding this exact pair (#2567C4 / #5EA7FF) against a rule that a tier never borrows working-cobalt; the two tokens had swapped jobs. */ --status-working: #2567C4; /* THE AMBER MARK HAS ITS OWN VALUE IN LIGHT, and only in light. --warning is #fab219, which is 1.83:1 on white - against the 3:1 a graphical object needs. It had never been measured: this file asserted 3:1 for the FAILED mark alone, so the whole status palette rode on one assertion about one colour. #8a6100 (--warning-fg) was the obvious candidate at 5.54:1 and it fails twice. At mark size it stops reading as amber and reads as brown - and it drops the dock badge's #1B1300 text to 3.33:1, under AA. A colour that clears a contrast rule by ceasing to mean what it meant has not fixed the problem, it has moved it. #b47c04 is the same hue and saturation as --warning, darkened until it clears: 3.60:1 as a mark and 5.11:1 behind the badge text. It was chosen by rendering the candidates at 11px beside the real Working, Complete and Failed marks and looking at them. #be8304 (3.26:1 / 5.65:1) is the nearer-to-amber alternative with less margin; it is one token either way. NOT --warning ITSELF. That token also paints --warning-bg, warning text and a dozen non-mark surfaces where 1.83:1 is not the criterion. The ruling was about the MARK, so the mark is what moves. DARK IS UNCHANGED and deliberately still tracks --warning: #FBBF24 is 11.56:1 on the dark surface and has nothing to fix. */ --warning-mark: #b47c04; --status-needs-you: var(--warning-mark); --status-scheduled: var(--muted); --status-complete: var(--ok); --status-paused: var(--muted); --status-failed: var(--critical); --status-cancelled: var(--muted); /* ---- found text ---- Its own pair rather than a borrowed one. Reusing --warning-bg would have said "something is wrong with this sentence"; reusing --accent-soft would put find results in the same colour as the selected conversation, and then the sidebar and the thread would be making the same statement about different things. A search match is neither a status nor a selection, so it gets its own two tokens and nothing else in the product may use them. */ --find: #fbe38a; --find-fg: #3a2f05; /* ---- only in this answer ---- Its own pair too, and for the same reason as find's. It cannot be --find: the two would be the same statement about different things, and both can be painted on one screen. It cannot be a status colour: a passage only one model wrote is neither a warning nor a pass — the two readings are "it spotted something" and "it made it up", and the product must not pick one. And it cannot be --accent-soft, which is themed: this must look the same under all six accents, because it is a finding about the text and not a piece of our chrome. */ --diff: #ece5fb; --diff-fg: #332755; /* ---- chart series — VALIDATED, do not eyeball-edit ---- node scripts/validate_palette.js "#2a78d6,#c9552b,#1a8f6a,#b07d10,#a8497d" --mode light --surface "#ffffff" → ALL PASS (incl. 3:1 contrast on every slot) --mode light --surface "#ffffff" → all checks pass Slot 4 (yellow) is sub-3:1 on white: the relief rule applies, so every series always ships a visible text label + value beside its mark. */ --s1: #2a78d6; --s2: #c9552b; --s3: #1a8f6a; --s4: #b07d10; --s5: #a8497d; --grid: #edeae2; --tip-bg: #1c1b19; --tip-fg: #ffffff; /* ---- type ---- */ --fs-micro: 10.5px; --fs-xs: 11.5px; --fs-sm: 12.5px; --fs-md: 13.5px; /* base — change here if the client wants 13 or 12.5 */ --fs-lg: 15px; --fs-xl: 17px; --fs-2xl: 20px; --fs-3xl: 25px; /* ---- space ---- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 28px; --sp-7: 40px; --sp-8: 56px; --sp-9: 80px; /* Icon box, in whole pixels. Icons sized in `em` inherit a fractional font size (--fs-md is 13.5px) and render their strokes on half-pixels, which reads as a soft, slightly uneven icon set rather than as a rounding error. */ --ico: 18px; /* ---- motion ---- Three durations, because there are three sizes of change and using one number for all of them is what makes an interface feel either sluggish or twitchy: dur-1 a state change on something already under the cursor. It must not be perceptible as a duration at all — only as "not a jump". dur-2 something arriving, or moving a short distance. dur-3 a panel. Big travel needs longer or it reads as a snap. Two easings, and the distinction matters: `ease` decelerates only, for things ARRIVING — they should look like they were already moving. `ease-io` has acceleration at both ends, for things moving BETWEEN two states, where a standing start is what you want. Everything below is gated by the prefers-reduced-motion rule further down, which switches every animation and transition in the product off at once. */ --dur-1: 120ms; --dur-2: 180ms; --dur-3: 260ms; --ease: cubic-bezier(.2,.8,.3,1); --ease-io: cubic-bezier(.4,0,.2,1); --r1: 6px; --r2: 8px; --r3: 11px; --r4: 14px; --rf: 999px; /* Workflows' panels asked for --r-md, which nothing defined, so they drew square (R201 inventory, 19 Oct). The house card radius, as .panel. */ --r-md: var(--r3); --font: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif; /* THE ONE PLACE THIS PRODUCT USES A SERIF, and it is used for exactly one thing: a sentence somebody might say, set apart from the interface talking about itself. A SYSTEM STACK, NOT A WEBFONT. The mockup used Instrument Serif, loaded from Google's servers on a page that had no CSP; this product blocks outside origins, and adding a font file to the bundle for one line of text is a page-weight cost paid on every screen. Georgia and its Windows and Apple equivalents are already on the machine, and the italic is what carries the character. */ --font-quote: Georgia, "Iowan Old Style", "Palatino Linotype", "Times New Roman", serif; --mono: ui-monospace, SFMono-Regular, "Cascadia Mono", Consolas, monospace; --sh-1: 0 1px 2px rgba(28,27,25,.05); --sh-2: 0 4px 12px -4px rgba(19,23,37,.10); --sh-3: 0 16px 40px -14px rgba(19,23,37,.20); /* ---- collapsible panel widths (driven by the data-* attributes) ---- */ --nav-w: 228px; --list-w: 250px; --insp-w: 288px; /* * The workspace bar's height, published as a token. * * The App Hub floats BELOW it (see .hub), and needed a number to sit under. Measuring it in * script and writing it back would be a second source of truth that disagrees for one frame on * every load; pinning it with min-block-size below and naming it here is one truth in two places * that cannot drift, because the same token sets both. */ --wsbar-h: 45px; /* There was a --sbw here: this browser's scrollbar width, measured in JS, because `scrollbar-gutter: stable` reserves that width inside the scroller and nowhere else, and every sibling of one had to pad its inline-end by `calc( + var(--sbw))` to end on the same line. It is gone, along with the probe in _Layout.cshtml that fed it, and the panels use `scrollbar-gutter: auto` instead — see the scrolling section further down. One client complaint arrived four times through that variable: first because the probe never ran, then because it ran and measured a bar of a width nothing was drawing, and finally because what it correctly reserved was empty space the client could see. If two edges have to agree, make them children of one box (D-229) — do not compute the difference. */ /* ---- the parts of the window the stylesheet does not draw ---------------- Scrollbars, the dropdown a native would lose the chevron painted on it below. */ .input:disabled { background-color: var(--surface-3); color: var(--muted); cursor: not-allowed; } .input-sm { padding: 5px 8px; font-size: var(--fs-sm); } /* A PASSWORD WITH A "SHOW" BUTTON INSIDE ITS RIGHT EDGE (sign-up, Syed 21 September 2026). The field keeps room for the button, so a long password never runs underneath it. */ .pw-field { position: relative; } .pw-field > .input { padding-inline-end: 72px; } .pw-reveal { position: absolute; inset-block: 4px; inset-inline-end: 4px; padding: 0 11px; border: 0; border-radius: calc(var(--r2) - 2px); background: transparent; color: var(--muted); font: inherit; font-size: var(--fs-sm); font-weight: 600; cursor: pointer; transition: background var(--dur-1), color var(--dur-1); } .pw-reveal:hover { color: var(--text); background: var(--surface-3); } .pw-reveal:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } .pw-reveal[hidden] { display: none; } /* CAPS LOCK (NETFIVE-Auth-Handoff §4.5, 21 September 2026). A hint about the keyboard, not an error: muted rather than red, and the field is never marked invalid for it - otherwise somebody typing a correct password in capitals is told their password is wrong, which it is not. */ .pw-caps { display: flex; align-items: center; gap: 6px; margin-block-start: 6px; font-size: var(--fs-xs); font-weight: 600; color: var(--muted); } .pw-caps[hidden] { display: none; } .pw-caps-key { display: inline-grid; place-items: center; min-inline-size: 18px; block-size: 18px; padding-inline: 4px; border: 1px solid var(--border); border-radius: 5px; background: var(--surface-3); font-size: 11px; line-height: 1; } /* RIGHT-TO-LEFT: THE REVEALED PASSWORD MUST NOT FLIP. The exception below keeps a password left-to-right by matching input[type="password"] - and the moment "Show" makes it type="text", that rule stops matching and an Urdu or Arabic reader watches their password reverse. So the whole field is held left-to-right as a unit, which also keeps the button and the room made for it on the same side. */ [dir="rtl"] .pw-field { direction: ltr; } [dir="rtl"] .pw-field > .input { text-align: right; } /* Every : a disabled control posts nothing, so the handler would read an empty value and refuse a save that changed nothing about that field. It also has to LOOK settled rather than broken - a greyed-out box invites clicking and reads as a fault, whereas plain text on the page reads as a fact. The hint underneath says why it is fixed. */ .field-static { padding: 7px 10px; border: 1px dashed var(--border-strong); border-radius: var(--r2); background: var(--surface-2); color: var(--muted); font-size: var(--fs-sm); } /* --------------------------------------------------------------------------- FLASH — the result of an action the user just took, at the top of the page. Distinct from .form-* on purpose. A validation block belongs to a form and is sized by it; a flash belongs to the page. Rendered as .form-ok it stretched the full content width, so "OpenAI base URL updated." arrived as five words floating in a 1000px empty green bar, which reads as a broken component rather than as confirmation. This shrinks to its own text. It also has to be dismissible. It is stateless server-side - a refresh brings it back - so nothing is lost by closing it, and it stops covering the row the operator is about to edit next. --------------------------------------------------------------------------- */ .flash { display: inline-flex; align-items: flex-start; gap: 8px; max-inline-size: 100%; margin-block-end: var(--sp-5); padding: 8px 10px 8px 12px; border-radius: var(--r2); font-size: var(--fs-sm); line-height: 1.5; animation: flash-in .22s cubic-bezier(.2,.8,.3,1) both; } .flash-ok { background: var(--ok-bg); color: var(--ok-fg); border: 1px solid var(--ok); } .flash-warn { background: var(--warning-bg); color: var(--warning-fg); border: 1px solid var(--warning); } .flash .gi { inline-size: 16px; block-size: 16px; flex-shrink: 0; margin-block-start: 2px; } .flash-x { margin-inline-start: 6px; color: inherit; opacity: .6; line-height: 1; font-size: var(--fs-md); padding: 0 2px; transition: opacity var(--dur-1); } .flash-x:hover { opacity: 1; } @keyframes flash-in { from { opacity: 0; transform: translateY(-7px); } } /* The plan grid and whatever follows it need air between them. Flush, the notice border sat directly on the card borders and on the featured card's 3px ring, which looks like two components colliding rather than two stacked. */ .plans + .flash, .plans + .form-warn, .plans + .form-ok { margin-block-start: var(--sp-6); } /* --------------------------------------------------------------------------- ADMIN — Nova's .dt is the data table and .panel is the card. What is missing is the row-level editing an admin screen needs: a form living inside a table cell, and a two-state toggle button that posts on click. --------------------------------------------------------------------------- */ .admin-tabs { display: flex; gap: var(--sp-4); overflow-x: auto; scrollbar-width: none; border-block-end: 1px solid var(--border); margin-block-end: var(--sp-5); } .admin-tabs::-webkit-scrollbar { display: none; } .admin-tab { padding: 8px 1px; font-size: var(--fs-sm); font-weight: 500; color: var(--muted); border-block-end: 2px solid transparent; margin-block-end: -1px; white-space: nowrap; } .admin-tab:hover { color: var(--text); } .admin-tab[aria-current="page"] { color: var(--text); font-weight: 600; border-block-end-color: var(--accent); } .inline-form { display: flex; align-items: center; gap: 5px; } .inline-form .input { min-inline-size: 0; } /* The footer of a table that does not fit on one screen. It sits INSIDE the .panel, under .dt-scroll, so the count and the controls belong visibly to the table above them rather than floating in the page. The row count is always shown, even on a single page - "13 of 13" is the answer to "is this everything?", which is the question a truncated list leaves an operator holding with no way to answer it. */ .pager { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; padding: var(--sp-3) var(--sp-4); border-block-start: 1px solid var(--border); font-size: var(--fs-xs); color: var(--muted); } /* A pager standing alone in its own panel - the card list on the pricing screen - has no table above it to be divided from, and the rule would sit directly on the panel border. */ .panel > .pager:only-child { border-block-start: 0; } .pager-count { font-variant-numeric: tabular-nums; } .pager-nav { display: flex; align-items: center; gap: var(--sp-2); } .pager-at { font-variant-numeric: tabular-nums; white-space: nowrap; } /* Disabled ends are rendered as spans, not disabled buttons: there is nothing to press on the first page, and a dead control that still looks pressable is how a user decides the screen is broken. */ .pager-end { opacity: .45; padding: 0 var(--sp-2); } /* ROWS PER PAGE (backlog 10.1). Sits beside the count, because it is part of the same sentence - "showing 1-25 of 340, 25 per page" - and a control at the top of the screen would be separated from the thing it changes. Deliberately the same pill as .lang-picker rather than a second look for the same kind of control: both are a display preference the reader sets for themselves, and every comment on that select about resetting appearance, painting a real background and stating colour-scheme applies here for exactly the same reasons. */ .pager-size { display: inline-flex; align-items: center; gap: var(--sp-1); block-size: 26px; padding-inline: var(--sp-1); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r2); } /* THE ARROW HAD TO BE DRAWN BACK ON. `appearance: none` is what lets a . An input inside contenteditable takes the caret, takes the Backspace, and can be deleted outright - leaving an item that is neither ticked nor unticked and a note that no longer round-trips. So the state lives in data-check and the box is this pseudo-element, which nothing can type into and nothing can delete. */ .nf-rich li[data-check] { list-style: none; margin-inline-start: -1.2rem; } .nf-rich li[data-check]::before { content: ''; display: inline-block; inline-size: 13px; block-size: 13px; margin-inline-end: 8px; vertical-align: baseline; border: 1.5px solid var(--text-3, #8b94a3); border-radius: 3px; cursor: pointer; } .nf-rich li[data-check="1"]::before { background: var(--accent); border-color: var(--accent); /* The tick, drawn rather than written, so it cannot be selected or deleted with the words beside it. */ background-image: linear-gradient(45deg, transparent 42%, #fff 42%, #fff 54%, transparent 54%), linear-gradient(-45deg, transparent 60%, #fff 60%, #fff 72%, transparent 72%); } .nf-rich li[data-check="1"] { color: var(--muted); text-decoration: line-through; } /* Asked for in the page, never in a window.prompt: a prompt cannot be styled or translated, and it stops a headless browser dead unless something was told to expect it. */ .nf-rich-link { display: flex; align-items: center; gap: 8px; padding: 8px var(--sp-5); border-top: 1px solid var(--border); } .nf-rich-link label { font-size: var(--fs-sm); font-weight: 600; } .nf-rich-link input { flex: 1; min-inline-size: 0; } .nf-editor textarea { flex: 1; min-width: 0; border: 0; background: transparent; padding: 0 var(--sp-5) var(--sp-5); resize: none; font-family: var(--mono); font-size: var(--fs-sm); line-height: 1.7; tab-size: 2; } .nf-editor textarea:focus { outline: none; } .nf-md { flex: 1; min-width: 0; overflow: auto; padding: 0 var(--sp-5) var(--sp-5); font-family: var(--nf-face, var(--read)); font-size: var(--fs-lg); line-height: 1.65; /* `scrollbar-width` does not inherit, so without this the preview drew a 15px system bar beside the list's 10px one - two bars of different widths in one window. And the wheel stops here as it does in the list. */ scrollbar-width: thin; overscroll-behavior: contain; } .nf-md > *:first-child { margin-top: 0; } .nf-md h1, .nf-md h2, .nf-md h3 { font-family: var(--font); letter-spacing: -0.02em; margin: 1.2em 0 0.4em; line-height: 1.25; } .nf-md h1 { font-size: var(--fs-xl); } .nf-md h2 { font-size: var(--fs-lg); } .nf-md h3 { font-size: var(--fs-md); color: var(--muted); } .nf-md p { margin: 0 0 0.75em; } /* Bold, in a face that HAS a bold. * * The reading serif is Source Serif 4 and its file stops at weight 600 - measured, not read off * the @font-face: the same file declared 400-900 renders 700 and 800 identically to 600, so the * axis ends in the font rather than in the CSS. asks for 700, clamps to 600, and at 40px * "Ali Hi" is 101.13px at 400 against 103.34px at 600. Two per cent. Syed: "there is no prominent * change in Ali" (22 September 2026). * * Widening the declaration would have looked like a fix and changed nothing. A heavier subset of * the serif would work, but that serif is fetched by every note and the comment above its * @font-face is protecting bytes on the wire, not typography. So emphasis is set in the interface * face, which is already loaded on any page that has a desk and does have a real 700. Serif text * with a sans emphasis is a deliberate pairing rather than an accident; if Syed would rather have * the serif's own bold, this rule comes out and a heavier subset goes in. * * ALL OF WHICH IS ABOUT THE SERIF, so it is now conditional on the serif. A note set in the sans or * the monospace (Syed, 3 October: the font style choice) has a face with a real 700 of its own, and * borrowing the interface face for its bold would be a pairing nobody asked for. `--nf-strong` is * what the chosen face sets; unset — which is every note until somebody chooses — this is unchanged. */ .nf-md strong, .nf-md b { font-family: var(--nf-strong, var(--font)); font-weight: 700; } .nf-md ul, .nf-md ol { margin: 0 0 0.75em; padding-left: 1.3em; } .nf-md li { margin-bottom: 0.25em; } .nf-md blockquote { margin: 0 0 0.75em; padding-left: 12px; border-left: 2px solid var(--accent-line); color: var(--muted); } .nf-md code { font-family: var(--mono); font-size: 0.85em; background: var(--surface-3); border: 1px solid var(--border); border-radius: 4px; padding: 0 4px; } .nf-md pre { background: var(--surface-3); border: 1px solid var(--border); border-radius: var(--r2); padding: var(--sp-3); overflow: auto; margin: 0 0 0.75em; } .nf-md pre code { background: none; border: 0; padding: 0; font-size: var(--fs-xs); } .nf-md a { color: var(--accent); text-underline-offset: 2px; } .nf-md hr { border: 0; border-top: 1px solid var(--border); margin: 1.2em 0; } .nf-md .nf-cb { list-style: none; margin-left: -1.3em; display: flex; align-items: flex-start; gap: 8px; } .nf-md .nf-cb input { margin-top: 5px; } .nf-md .nf-cb.checked { color: var(--faint); text-decoration: line-through; text-decoration-color: var(--border-strong); } /* ---------------- confirm strip ---------------- */ .nf-confirm { display: flex; align-items: center; gap: var(--sp-2); padding: 7px var(--sp-3); background: var(--critical-bg); border-top: 1px solid var(--critical); font-size: var(--fs-sm); color: var(--critical); } /* The delete question sits under the toolbar now rather than at the foot of the pane, so its rule goes on the edge it meets the document on. The error bar below the app keeps the original. */ .nf-confirm-top { flex: 0 0 auto; border-top: 0; border-bottom: 1px solid var(--critical); } .nf-confirm .nf-sp { flex: 1; } .nf-confirm button { font-size: var(--fs-xs); font-weight: 600; border: 1px solid currentColor; border-radius: var(--rf); padding: 2px 11px; } .nf-confirm .nf-plain { border-color: transparent; color: var(--muted); } /* ---------------- narrow window ---------------- */ @container (max-width: 430px) { .nf-bar { flex-wrap: wrap; } .nf-search { flex: 1 1 100%; order: -1; } .nf-sort { max-width: none; flex: 1; } .nf-titlein, .nf-notemeta, .nf-tagedit, .nf-md, .nf-editor textarea { padding-left: var(--sp-3); padding-right: var(--sp-3); } .nf-editor.split { flex-direction: column; } .nf-editor.split > * { width: 100%; height: 50%; } .nf-editor.split .nf-md { border-left: 0; border-top: 1px solid var(--border); } } @container (max-width: 360px) { .nf-task .nf-tag, .nf-task .nf-more { display: none; } } /* The Tasks window is typically the narrow one. Below ~520px the date and the tags earn their place; the "added 2 h ago" stamp does not — it stays in the row's tooltip — and dropping it is what keeps a short task on one line instead of wrapping. */ @container (max-width: 520px) { .nf-task .nf-stamp { display: none; } } /* ============================================================================ MEETINGS (the MeetApp conversion, 15 September 2026) The lobby and panels follow the theme. The stage behind the video stays dark in both themes, as in every video call, because faces and screens read better against it. Laid out by container queries, since the page also runs inside a desktop window. ============================================================================ */ .mt-mount { container-type: inline-size; position: relative; min-block-size: 100dvh; display: flex; flex-direction: column; background: var(--bg); color: var(--text); font-family: var(--font); font-size: var(--fs-md); } .mt-grow { flex: 1; min-inline-size: 0; } .mt-mirror { transform: scaleX(-1); } .mt-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 16px; border-radius: 10px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); font: inherit; font-weight: 600; cursor: pointer; } .mt-btn:hover { background: var(--surface-3); } .mt-btn-primary { background: var(--accent-fill); border-color: var(--accent); color: var(--on-accent); } .mt-btn-primary:hover { background: var(--accent-fill-hover); } .mt-btn:disabled { opacity: .55; cursor: default; } .mt-input { padding: 9px 12px; border: 1px solid var(--border-strong); border-radius: 10px; background: var(--surface); color: var(--text); font: inherit; font-size: var(--fs-md); min-inline-size: 0; } .mt-input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } .mt-code-input { font-family: var(--mono); letter-spacing: .12em; text-transform: uppercase; } .mt-hint { margin: 0; color: var(--muted); font-size: var(--fs-sm); } .mt-error { margin: 0; color: var(--critical); font-size: var(--fs-sm); } /* Devices and the invite link (Syed, 17 September: say why there is no camera, and show the link). */ .mt-trouble { color: var(--text); } .mt-inline-btn { padding: 0; border: 0; background: none; color: var(--accent); font: inherit; text-decoration: underline; cursor: pointer; } .mt-inline-btn:hover { color: var(--accent-hover); } .mt-select { padding: 9px 12px; border: 1px solid var(--border-strong); border-radius: 10px; background: var(--surface); color: var(--text); font: inherit; font-size: var(--fs-sm); inline-size: 100%; min-inline-size: 0; } .mt-none { margin: 0; color: var(--muted); font-size: var(--fs-sm); } /* Reactions: they rise over the call and are gone in four seconds, like the noise they stand for. */ .mt-react-wrap { display: flex; } .mt-react-strip { position: absolute; inset-block-end: calc(100% + 8px); inset-inline-start: 50%; transform: translateX(-50%); display: flex; gap: 2px; padding: 6px; border-radius: 999px; background: #1F2B2E; border: 1px solid rgba(255, 255, 255, .14); box-shadow: 0 8px 24px rgba(0, 0, 0, .45); z-index: 3; /* And on a window too narrow even for a centred strip, the emoji go onto a second row. Six of them shown small is the point; four shown and two hidden is the bug. */ flex-wrap: wrap; justify-content: center; max-inline-size: calc(100vw - 16px); } .mt-react-btn { min-inline-size: 40px; padding: 4px 6px; border: 0; border-radius: 999px; background: none; font-size: 22px; line-height: 1.2; cursor: pointer; } .mt-react-btn:hover { background: rgba(255, 255, 255, .12); } /* A poll: the question, the choices, and bars that only appear when the room has sent numbers. */ .mt-poll-q { margin: 0; font-size: var(--fs-md); color: var(--text); font-weight: 600; } .mt-choices { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .mt-choice { display: grid; gap: 4px; } /* A choice while the poll is open. It carries the running count since 6 October 2026, so it lays out as a row like .mt-choice-face beside it rather than as a line of text. */ .mt-choice-btn { inline-size: 100%; padding: 9px 12px; border: 1px solid var(--border-strong); border-radius: 10px; background: var(--surface); color: var(--text); font: inherit; text-align: start; cursor: pointer; display: flex; gap: 8px; align-items: baseline; } .mt-choice-btn:hover { border-color: var(--accent); } /* The one this person has chosen, while they can still change it. The closed poll says the same thing through .mt-choice-face below; both are needed, because the two states draw different elements. */ .mt-choice-btn[aria-pressed="true"] { border-color: var(--accent); font-weight: 600; } .mt-choice-face { display: flex; gap: 8px; align-items: baseline; font-size: var(--fs-sm); color: var(--text); } .mt-choice-count { color: var(--muted); font-variant-numeric: tabular-nums; } .mt-choice-bar { block-size: 6px; border-radius: 999px; background: var(--surface-3); overflow: hidden; } .mt-choice-bar span { display: block; block-size: 100%; background: var(--accent); } /* The person's own answer, so a closed poll still says what they chose. */ .mt-choice.is-mine .mt-choice-face { font-weight: 600; } .mt-choice.is-mine .mt-choice-bar span { background: var(--accent-fill-hover); } /* Breakout rooms. */ .mt-where { background: rgba(143, 156, 232, .3); } .mt-groups { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; } .mt-group { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); font-size: var(--fs-sm); color: var(--text); } .mt-group.is-mine { border-color: var(--accent); } .mt-seat { display: flex; align-items: center; gap: 8px; font-size: var(--fs-sm); color: var(--text); } .mt-seat-pick { inline-size: auto; max-inline-size: 55%; padding: 5px 8px; } .mt-to-all { font-weight: 600; } /* The whiteboard, over the tiles the way a shared screen is. */ .mt-board { min-inline-size: 0; min-block-size: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); background: #0F1A18; /* The scroll bars sit over the paper, along its two far edges. Relative here so they can. */ position: relative; } /* * THE TOOL STRIP (Syed, 18 September 2026: "Pen, Highlighter, Eraser, Line, shapes, Text, Sticky Notes"). * * Square targets rather than text buttons: ten of them have to fit beside the colours and the nibs on a laptop * and still be tappable on a phone, and every one carries its name as a tooltip and an aria-label because a * glyph alone is a puzzle. */ .mt-tool { display: grid; place-items: center; inline-size: 30px; block-size: 26px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, .18); background: none; color: #E9F2F0; cursor: pointer; padding: 0; font-size: 14px; line-height: 1; } .mt-tool:hover:not(:disabled) { background: rgba(255, 255, 255, .1); } .mt-tool:disabled { opacity: .4; cursor: default; } .mt-tool.is-on { background: rgba(255, 255, 255, .22); border-color: #FFFFFF; } .mt-size span { color: #E9F2F0; font-weight: 700; } /* * THE SCROLL BARS (Syed: "there is no scroll bar to move left or right"). * * Real range inputs, so they drag, take the arrow keys, read out to a screen reader and work under a thumb. * Drawn slim and over the board's edges rather than taking a row of their own, because the board is the thing * that was said to be too small and a scroll bar that shrinks it further would be answering with the problem. */ /* * TYPING A LABEL, ON THE BOARD (Syed: "Text, Sticky Notes"). * * This replaced a window.prompt, which DID NOTHING: Meetings is a framed app and the desk's iframe carries no * allow-modals, so Chromium ignores prompt() silently — the tool would have shipped looking finished and doing * nothing at all. The box is the better control regardless, because it sits where the words will be, at the size * and colour they will be, instead of hiding the board behind a dialog. * * Sized and positioned inline by the component from the same arithmetic the painter uses; only its manners are * here. It grows with what is typed and never scrolls: a sticky note whose text is cut off by its own box is a * note somebody has to open something else to read. */ .mt-board-type { position: absolute; z-index: 3; min-inline-size: 120px; min-block-size: 1.4em; max-inline-size: 45%; padding: 4px 6px; border: 1px dashed rgba(233, 242, 240, .6); border-radius: 6px; resize: none; overflow: hidden; background: rgba(15, 26, 24, .85); font-family: "Instrument Sans", system-ui, sans-serif; line-height: 1.3; field-sizing: content; } .mt-board-type.is-note { border-style: solid; border-color: rgba(23, 32, 31, .5); } .mt-board-type:focus-visible { outline: 2px solid #E9F2F0; outline-offset: 1px; } .mt-board.is-light .mt-board-type { background: rgba(246, 245, 240, .9); border-color: rgba(23, 34, 32, .5); } .mt-board-scroll { position: absolute; margin: 0; appearance: none; background: rgba(255, 255, 255, .1); border-radius: 999px; cursor: pointer; z-index: 2; } .mt-board-scroll-x { inset-inline: 10px 22px; inset-block-end: 6px; block-size: 10px; } /* * PHYSICAL width and height on this one, deliberately, and it was logical properties first. * * `writing-mode: vertical-lr` is what makes a range input run up and down — and it also swaps what the logical * properties MEAN. So `inline-size: 10px` set the bar's vertical extent rather than its width, and the bar came * out 1248 wide by 10 tall: a second horizontal scroll bar, lying across the board, indistinguishable from the * real one at a glance. * * Caught by measuring the rendered box. The check that had passed a moment earlier only asked whether the bar * sat INSIDE the paper, which a horizontal bar does perfectly well — the question was right and too weak. */ .mt-board-scroll-y { writing-mode: vertical-lr; top: 10px; bottom: 22px; right: 6px; width: 10px; height: auto; } .mt-board-scroll::-webkit-slider-thumb { appearance: none; inline-size: 26px; block-size: 10px; border-radius: 999px; background: rgba(233, 242, 240, .75); } .mt-board-scroll-y::-webkit-slider-thumb { inline-size: 10px; block-size: 26px; } .mt-board-scroll::-moz-range-thumb { inline-size: 26px; block-size: 10px; border: 0; border-radius: 999px; background: rgba(233, 242, 240, .75); } .mt-board-scroll:focus-visible { outline: 2px solid #E9F2F0; outline-offset: 2px; } /* On the light surface the same bars have to be dark, or they vanish into the paper. */ .mt-board.is-light .mt-board-scroll { background: rgba(23, 34, 32, .12); } .mt-board.is-light .mt-board-scroll::-webkit-slider-thumb { background: rgba(23, 34, 32, .55); } .mt-board.is-light .mt-board-scroll::-moz-range-thumb { background: rgba(23, 34, 32, .55); } .mt-board-tools { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 8px 10px; background: #16211F; border-block-end: 1px solid rgba(255, 255, 255, .1); } .mt-board-gap { inline-size: 10px; } .mt-ink { inline-size: 26px; block-size: 26px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; padding: 0; } .mt-ink.is-on { border-color: #FFFFFF; } .mt-nib { display: grid; place-items: center; inline-size: 30px; block-size: 26px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, .18); background: none; cursor: pointer; padding: 0; } .mt-nib.is-on { background: rgba(255, 255, 255, .16); } .mt-nib span { display: block; border-radius: 50%; background: #E9F2F0; } /* touch-action: a finger on a phone must draw rather than scroll the page out from under the board. */ .mt-board-paper { inline-size: 100%; block-size: 100%; touch-action: none; cursor: crosshair; display: block; } /* Watching rather than writing: the pointer says so before anybody tries to draw and finds they cannot (Syed, 25 September). Panning still works, so the hand is right for both. */ .mt-board-paper.is-watching { cursor: grab; } .mt-board-paper.is-watching:active { cursor: grabbing; } /* Zoomed in, the board can be moved about, and the pointer says so before anybody tries (Syed, 22 September). */ .mt-board-paper.is-zoomed { cursor: grab; } .mt-board-paper.is-zoomed:active { cursor: grabbing; } /* The magnification, wide enough for "2.5×" so the toolbar does not shuffle as it changes, and lined up on the digits rather than jumping about between 1× and 4×. */ .mt-board-level { min-inline-size: 48px; font-variant-numeric: tabular-nums; } .mt-board-said { margin: 6px 12px 0; font-size: var(--fs-sm); color: var(--dk-ink-2); } .mt-reactions { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 2; } .mt-reaction { position: absolute; inset-block-end: 12px; display: grid; justify-items: center; gap: 2px; animation: mt-reaction-rise 4s ease-out forwards; } .mt-reaction-face { font-size: 34px; line-height: 1; } .mt-reaction-name { padding: 1px 8px; border-radius: 999px; background: rgba(0, 0, 0, .6); color: #FFFFFF; font-size: var(--fs-xs); white-space: nowrap; } @keyframes mt-reaction-rise { 0% { transform: translateY(20px); opacity: 0; } 15% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(-220px); opacity: 0; } } /* Somebody who asked for less movement still sees it, in place, without the climb. */ @media (prefers-reduced-motion: reduce) { .mt-reaction { animation: mt-reaction-fade 4s ease-out forwards; } @keyframes mt-reaction-fade { 0%, 80% { opacity: 1; } 100% { opacity: 0; } } } /* A long address: it wraps rather than hiding its own end, because reading it is the point. */ .mt-link { font-family: var(--mono); font-size: var(--fs-sm); inline-size: 100%; resize: none; overflow-wrap: anywhere; line-height: 1.4; } .mt-code-big { margin: 0; font-family: var(--mono); font-size: var(--fs-lg); letter-spacing: .12em; color: var(--text); } .mt-or { margin: 4px 0 0; color: var(--muted); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .08em; } /* ---- the lobby ---- */ .mt-lobby { flex: 1; display: grid; place-items: center; padding: 24px; } .mt-lobby-card { inline-size: min(900px, 100%); display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 24px; padding: 24px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--sh-2); } .mt-preview { position: relative; aspect-ratio: 16 / 9; background: #0B1012; border-radius: 12px; overflow: hidden; } .mt-preview video { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; } .mt-preview-off { position: absolute; inset: 0; display: grid; place-items: center; } .mt-preview-bar { position: absolute; inset-inline: 0; inset-block-end: 12px; display: flex; justify-content: center; gap: 10px; } .mt-round { inline-size: 44px; block-size: 44px; border-radius: 50%; border: 0; display: grid; place-items: center; cursor: pointer; background: rgba(255, 255, 255, .88); color: #0F1A18; } .mt-round svg { inline-size: 20px; block-size: 20px; } .mt-round.is-off { background: #C4382A; color: #fff; } .mt-round:disabled { opacity: .5; cursor: default; } .mt-form { display: grid; gap: 12px; align-content: start; } .mt-title { margin: 0; font-size: var(--fs-xl); letter-spacing: -.01em; } .mt-field { display: grid; gap: 6px; font-size: var(--fs-sm); color: var(--muted); } .mt-avatar-circle { inline-size: 76px; block-size: 76px; border-radius: 50%; display: grid; place-items: center; background: #2C3B3E; color: #E9F2F0; font-size: 26px; font-weight: 700; } /* ---- the call ---- */ .mt-call { position: relative; flex: 1; min-block-size: 0; display: grid; grid-template-rows: auto auto auto minmax(0, 1fr) auto; background: #0B1012; color: #E9F2F0; } .mt-top { display: flex; align-items: center; gap: 10px; padding: 8px 14px; font-size: var(--fs-sm); min-block-size: 44px; } .mt-top-name { font-weight: 600; } .mt-top-count { color: #A2B4B0; } .mt-badge { padding: 2px 9px; border-radius: 999px; background: rgba(255, 255, 255, .12); font-size: var(--fs-xs); } /* Recording: red and moving, because it is the one thing in a call nobody may miss. */ .mt-badge.is-recording { display: inline-flex; align-items: center; gap: 6px; background: rgba(226, 74, 74, .24); color: #FFDCDC; } .mt-rec-dot { inline-size: 8px; block-size: 8px; border-radius: 50%; background: #FF5A5A; animation: mt-rec-pulse 1.6s ease-in-out infinite; } @keyframes mt-rec-pulse { 50% { opacity: .2; } } @media (prefers-reduced-motion: reduce) { .mt-rec-dot { animation: none; } } .mt-code { font-family: var(--mono); letter-spacing: .06em; } /* The meeting's clock (Syed, 22 September 2026). Tabular figures so the badge does not twitch wider and narrower every second as the digits change — a number that jitters reads as a fault. */ .mt-clock { font-variant-numeric: tabular-nums; letter-spacing: .02em; } .mt-bar { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px; padding: 6px 12px; background: rgba(143, 156, 232, .22); font-size: var(--fs-sm); } .mt-body { position: relative; grid-row: 4; display: grid; grid-template-columns: minmax(0, 1fr) auto; min-block-size: 0; } .mt-grid { display: grid; gap: 10px; padding: 10px; grid-auto-rows: minmax(160px, 1fr); min-block-size: 0; overflow: auto; } .mt-tile { position: relative; min-block-size: 0; background: #1A2426; border-radius: 12px; overflow: hidden; } .mt-tile.is-spotlight { grid-column: 1 / -1; grid-row: span 2; } /* Tiles share the stage in equal rows, so a video fills its tile rather than sizing it. THIS RULE WAS MISSING and the comment above was all that was left of it (Syed's meeting test, 17 September). A