FedM8 · UX · fedm8-002
Green and white
The previous FedM8 app design, retired for new work on Nov 2, 2026 and replaced by FedM8 003. Pages not yet rebuilt still use it. Reference only.
retired
- Project
- FedM8
- Use for
- reference only
- Source of truth
- Original page
- Copied from
jbnx/fedm8-scan@c079166 design/002on 2026-11-06
Copy the code
tokens.json
{
"id": "002",
"name": "Green and white",
"version": "2026-10-21",
"status": "retired",
"summary": "Retired 2026-11-02 — replaced by design 003 (Card hub + social). The approved app design: warm paper, olive controls, dark green ink, serif headings, sans controls, and Chat on every screen.",
"page": "https://fedm8.com/design/002/",
"catalog": "https://fedm8.com/design/catalog.json",
"use_for": [
"reference only"
],
"not_for": [
"Brand marks, walkthrough videos, YouTube thumbnails, social posts and print: use design 001 (navy and gold)."
],
"precedence": "If this file and DESIGN.md disagree, DESIGN.md wins and this file needs a fix.",
"source_files": [
"DESIGN.md",
"assets/approved-design.css",
"assets/approved-design.js",
"assets/fedm8-room.css",
"assets/chat-words.js",
"assets/fedm8-room.js",
"assets/chat-home.css",
"assets/chat-home.js",
"assets/first-post.css",
"assets/first-post.js",
"assets/talk-doors.css",
"assets/talk-doors.js",
"assets/talk-follow.css",
"assets/talk-follow.js",
"assets/teaming.css",
"assets/teaming.js",
"assets/room-extras.css",
"assets/commons-feed.css",
"assets/os-grants.css",
"assets/plan-tile.css",
"assets/plan-tile.js",
"tier.js"
],
"how_to_use": [
"Build with the app's own parts: body.fd-design and the shell in assets/approved-design.css, FedM8Room.mount for any conversation, FedM8ChatWords for every Chat word.",
"Read colors from the nine core variables. For any other color in this file, write its hex value: it is not a variable in the app.",
"The x2- classes on the design page draw samples only. Never ship them.",
"Check every new screen at 1440 x 1000 and at 375 x 812."
],
"colors_note": "Only the nine colors with app_variable true exist in the app, set by assets/approved-design.css on body.fd-design. The rest are hex values the app files use; their --fd- names exist only on the design page, so app code writes the hex.",
"colors": {
"--fd-bg": {
"value": "#f5f3ec",
"name": "Canvas",
"use": "The page behind cards, the rail and the content",
"app_variable": true
},
"--fd-paper": {
"value": "#fffef9",
"name": "Paper",
"use": "Cards, header, dock, dialogs, sheets, fields",
"app_variable": true
},
"--fd-soft": {
"value": "#eef1e7",
"name": "Soft",
"use": "Quiet fills: chips, hover on room actions, the pressed scope tab",
"app_variable": true
},
"--fd-ink": {
"value": "#29372e",
"name": "Ink",
"use": "Text and headings",
"app_variable": true
},
"--fd-muted": {
"value": "#586653",
"name": "Muted",
"use": "Second lines, meta, notes, gates",
"app_variable": true
},
"--fd-line": {
"value": "#d9ded0",
"name": "Line",
"use": "Card edges and dividers. Never the only edge of a field.",
"app_variable": true
},
"--fd-green": {
"value": "#526547",
"name": "Olive",
"use": "The one main button per view, the focus ring, the current-item bar, pressed choices",
"app_variable": true
},
"--fd-green-dark": {
"value": "#344b2c",
"name": "Dark olive",
"use": "Words on light fills, ghost buttons, room actions, links in rooms, toasts",
"app_variable": true
},
"--fd-mint": {
"value": "#d9eddd",
"name": "Mint",
"use": "Count pills",
"app_variable": true
},
"--fd-line-2": {
"value": "#cbd4bf",
"name": "Firm line",
"use": "Ghost button edges, dashed empty states, the help dialog edge",
"app_variable": false,
"seen_in": "assets/approved-design.css"
},
"--fd-field-line": {
"value": "#81976b",
"name": "Field edge",
"use": "Edges of fields in the content (3.2:1), the grant row's ghost buttons",
"app_variable": false,
"seen_in": "assets/approved-design.css, assets/os-grants.css"
},
"--fd-hover": {
"value": "#ebeee3",
"name": "Rail hover",
"use": "A rail link under the pointer",
"app_variable": false,
"seen_in": "assets/approved-design.css"
},
"--fd-hover-2": {
"value": "#edf1e5",
"name": "Button hover",
"use": "Ghost buttons and header buttons under the pointer",
"app_variable": false,
"seen_in": "assets/approved-design.css"
},
"--fd-active": {
"value": "#e4ead8",
"name": "Current",
"use": "The current rail item, the current room, a pressed first-post choice, the P tile",
"app_variable": false,
"seen_in": "assets/approved-design.css, assets/chat-home.css, assets/plan-tile.css"
},
"--fd-chip": {
"value": "#eef1e7",
"name": "Chip",
"use": "Chip fill (the same as Soft)",
"app_variable": false,
"seen_in": "assets/approved-design.css"
},
"--fd-chip-ink": {
"value": "#42533a",
"name": "Chip words",
"use": "Words on a chip",
"app_variable": false,
"seen_in": "assets/approved-design.css"
},
"--fd-callout": {
"value": "#f0f4e8",
"name": "Callout",
"use": "The Match-M8 box and other callouts",
"app_variable": false,
"seen_in": "assets/approved-design.css"
},
"--fd-callout-line": {
"value": "#cfd8c2",
"name": "Callout edge",
"use": "The edge of a callout",
"app_variable": false,
"seen_in": "assets/approved-design.css"
},
"--fd-selected-line": {
"value": "#b8c5aa",
"name": "Selected edge",
"use": "A selected card's edge; plan tile edges",
"app_variable": false,
"seen_in": "assets/approved-design.css, assets/plan-tile.css"
},
"--fd-selected-bar": {
"value": "#81976b",
"name": "Selected bar",
"use": "The 2px bar inside a selected card's left edge; the lede bar",
"app_variable": false,
"seen_in": "assets/approved-design.css"
},
"--fd-olive-hover": {
"value": "#3e5234",
"name": "Olive hover",
"use": "The main button under the pointer; Try again under the pointer",
"app_variable": false,
"seen_in": "assets/approved-design.css"
},
"--fd-link": {
"value": "#435e36",
"name": "Link",
"use": "Links in running text",
"app_variable": false,
"seen_in": "assets/approved-design.css"
},
"--fd-label": {
"value": "#5d6958",
"name": "Label",
"use": "Rail group labels and Chat home kickers, 10px capitals",
"app_variable": false,
"seen_in": "assets/approved-design.css, assets/chat-home.css"
},
"--fd-count-ink": {
"value": "#31553b",
"name": "Count words",
"use": "Words in a count pill; amounts and match numbers",
"app_variable": false,
"seen_in": "assets/approved-design.css"
},
"--fd-count-line": {
"value": "#c5ddc9",
"name": "Count edge",
"use": "The edge of a count pill",
"app_variable": false,
"seen_in": "assets/approved-design.css"
},
"--fd-due-ink": {
"value": "#825322",
"name": "Due words",
"use": "Due dates on a chip",
"app_variable": false,
"seen_in": "assets/approved-design.css"
},
"--fd-due-bg": {
"value": "#fff2d8",
"name": "Due fill",
"use": "The due-date chip",
"app_variable": false,
"seen_in": "assets/approved-design.css"
},
"--fd-due-line": {
"value": "#eddbb6",
"name": "Due edge",
"use": "The edge of the due-date chip",
"app_variable": false,
"seen_in": "assets/approved-design.css"
},
"--fd-ai-bg": {
"value": "#fbf7e9",
"name": "Host post fill",
"use": "Posts by FedM8 AI",
"app_variable": false,
"seen_in": "assets/fedm8-room.css"
},
"--fd-ai-line": {
"value": "#eadfb8",
"name": "Host post edge",
"use": "The edge of a FedM8 AI post",
"app_variable": false,
"seen_in": "assets/fedm8-room.css"
},
"--fd-ai-mark": {
"value": "#efe2b5",
"name": "Host mark",
"use": "The FedM8 AI avatar and the Pinned pill",
"app_variable": false,
"seen_in": "assets/fedm8-room.css"
},
"--fd-amber": {
"value": "#fbf3dc",
"name": "Heads-up fill",
"use": "The heads-up while typing; Waiting on an answer",
"app_variable": false,
"seen_in": "assets/fedm8-room.css"
},
"--fd-amber-line": {
"value": "#e3cf94",
"name": "Heads-up edge",
"use": "The edge of the heads-up",
"app_variable": false,
"seen_in": "assets/fedm8-room.css"
},
"--fd-amber-ink": {
"value": "#5c4708",
"name": "Heads-up words",
"use": "Words in the heads-up and the Pinned pill",
"app_variable": false,
"seen_in": "assets/fedm8-room.css"
},
"--fd-fail-bg": {
"value": "#fbf4e8",
"name": "Could not load fill",
"use": "The could-not-load line",
"app_variable": false,
"seen_in": "assets/approved-design.css, assets/os-talk.css"
},
"--fd-fail-line": {
"value": "#e3c9a6",
"name": "Could not load edge",
"use": "The edge of the could-not-load line",
"app_variable": false,
"seen_in": "assets/approved-design.css, assets/os-talk.css"
},
"--fd-fail-ink": {
"value": "#5b3a12",
"name": "Could not load words",
"use": "Words in the could-not-load line",
"app_variable": false,
"seen_in": "assets/approved-design.css"
},
"--fd-red": {
"value": "#8f2d22",
"name": "Red",
"use": "Field problems and the Remove button. Never decoration.",
"app_variable": false,
"seen_in": "assets/fedm8-room.css"
},
"--fd-red-soft": {
"value": "#fbecea",
"name": "Refused fill",
"use": "The line shown when a post was refused (edge #e2b8b2, words #6d231b)",
"app_variable": false,
"seen_in": "assets/fedm8-room.css"
},
"--fd-online": {
"value": "#2f7d4a",
"name": "Online",
"use": "The online dot, always with the words Online now",
"app_variable": false,
"seen_in": "assets/teaming.css"
},
"--fd-answered": {
"value": "#2f6b3a",
"name": "Answered",
"use": "The Answered pill and the accepted-answer line, always with a check mark and a word",
"app_variable": false,
"seen_in": "assets/room-extras.css"
},
"--fd-placeholder": {
"value": "#6a7565",
"name": "Placeholder",
"use": "Placeholder words in a field, never the only label",
"app_variable": false,
"seen_in": "assets/approved-design.css"
},
"--fd-selection": {
"value": "#dce8cd",
"name": "Selection",
"use": "Selected text",
"app_variable": false,
"seen_in": "assets/approved-design.css"
},
"--fd-scrim": {
"value": "#23302366",
"name": "Scrim",
"use": "Behind the help dialog. Room dialogs and the phone menu use #1d2a2140; the Room info sheet uses #1b241e66.",
"app_variable": false,
"seen_in": "assets/approved-design.css"
}
},
"chat_variables": {
"note": "Real variables the Chat files set on their own parts. They repeat the core colors; read them inside those parts.",
"room": {
"set_on": ".fr-room, .fr-dialog, .fr-menu, .fr-headsup, .fr-refusal, .fr-toast (assets/fedm8-room.css)",
"values": {
"--fr-paper": "#fffef9",
"--fr-canvas": "#f5f3ec",
"--fr-olive": "#526547",
"--fr-olive-dark": "#344b2c",
"--fr-ink": "#29372e",
"--fr-muted": "#586653",
"--fr-line": "#d9ded0",
"--fr-soft": "#eef1e7",
"--fr-amber": "#fbf3dc",
"--fr-amber-line": "#e3cf94",
"--fr-amber-ink": "#5c4708",
"--fr-red": "#8f2d22",
"--fr-red-soft": "#fbecea"
}
},
"teaming": {
"set_on": "Who's here and People to say hi to (assets/teaming.css)",
"values": {
"--tm-paper": "#fffef9",
"--tm-canvas": "#f5f3ec",
"--tm-olive": "#526547",
"--tm-olive-dark": "#344b2c",
"--tm-ink": "#29372e",
"--tm-muted": "#586653",
"--tm-line": "#d9ded0",
"--tm-soft": "#eef1e7",
"--tm-on": "#2f7d4a",
"--tm-tag": "#e5ecdb",
"--tm-tag-line": "#c3d0b2"
}
}
},
"plan_tile_vars": {
"--plan-b-ink": "#526547",
"--plan-b-bg": "transparent",
"--plan-b-line": "#b8c5aa",
"--plan-p-ink": "#344b2c",
"--plan-p-bg": "#e4ead8",
"--plan-p-line": "#b8c5aa"
},
"comments_box_vars": {
"--pc-surface": "#fffef9",
"--pc-ink": "#29372e",
"--pc-muted": "#586653",
"--pc-line": "#d9ded0",
"--pc-accent": "#526547",
"--pc-accent-ink": "#ffffff",
"--pc-soft": "#eef1e7",
"--pc-radius": "8px",
"--pc-font": "\"DM Sans\", system-ui, sans-serif"
},
"contrast": [
{
"fg": "#29372e",
"bg": "#fffef9",
"ratio": 12.38,
"pass": "AA",
"use": "Body text on paper"
},
{
"fg": "#29372e",
"bg": "#f5f3ec",
"ratio": 11.26,
"pass": "AA",
"use": "Body text on canvas"
},
{
"fg": "#586653",
"bg": "#fffef9",
"ratio": 6.04,
"pass": "AA",
"use": "Second lines and meta on paper"
},
{
"fg": "#586653",
"bg": "#f5f3ec",
"ratio": 5.5,
"pass": "AA",
"use": "Notes on the page"
},
{
"fg": "#586653",
"bg": "#eef1e7",
"ratio": 5.34,
"pass": "AA",
"use": "Muted words on a soft fill"
},
{
"fg": "#fffef9",
"bg": "#526547",
"ratio": 6.28,
"pass": "AA",
"use": "Main buttons"
},
{
"fg": "#fffef9",
"bg": "#3e5234",
"ratio": 8.45,
"pass": "AA",
"use": "Main button under the pointer"
},
{
"fg": "#344b2c",
"bg": "#e4ead8",
"ratio": 7.79,
"pass": "AA",
"use": "Current rail item, the P tile"
},
{
"fg": "#344b2c",
"bg": "#fffef9",
"ratio": 9.5,
"pass": "AA",
"use": "Ghost buttons, room actions"
},
{
"fg": "#435e36",
"bg": "#fffef9",
"ratio": 7.19,
"pass": "AA",
"use": "Links"
},
{
"fg": "#5d6958",
"bg": "#f5f3ec",
"ratio": 5.21,
"pass": "AA",
"use": "Rail labels"
},
{
"fg": "#42533a",
"bg": "#eef1e7",
"ratio": 7.26,
"pass": "AA",
"use": "Chips"
},
{
"fg": "#31553b",
"bg": "#d9eddd",
"ratio": 6.86,
"pass": "AA",
"use": "Count pills"
},
{
"fg": "#825322",
"bg": "#fff2d8",
"ratio": 5.9,
"pass": "AA",
"use": "Due chips"
},
{
"fg": "#5c4708",
"bg": "#fbf3dc",
"ratio": 8.03,
"pass": "AA",
"use": "Heads-up"
},
{
"fg": "#5b3a12",
"bg": "#fbf4e8",
"ratio": 9.33,
"pass": "AA",
"use": "Could not load"
},
{
"fg": "#6d231b",
"bg": "#fbecea",
"ratio": 9.59,
"pass": "AA",
"use": "Refused"
},
{
"fg": "#8f2d22",
"bg": "#fffef9",
"ratio": 8.1,
"pass": "AA",
"use": "Field problems"
},
{
"fg": "#2f6b3a",
"bg": "#e6f1e3",
"ratio": 5.5,
"pass": "AA",
"use": "Answered pill"
},
{
"fg": "#6a7565",
"bg": "#ffffff",
"ratio": 4.83,
"pass": "AA",
"use": "Placeholders"
},
{
"fg": "#526547",
"bg": "#fffef9",
"ratio": 6.28,
"pass": "AA (3:1 for non-text)",
"use": "Focus ring"
},
{
"fg": "#81976b",
"bg": "#fffef9",
"ratio": 3.16,
"pass": "AA (3:1 for non-text)",
"use": "Field edges"
},
{
"fg": "#d9ded0",
"bg": "#fffef9",
"ratio": 1.36,
"pass": "decoration only",
"use": "Dividers and card edges, never the only edge of a field"
},
{
"fg": "#c9d1bd",
"bg": "#ffffff",
"ratio": 1.57,
"pass": "known gap",
"use": "Room box edge today; new fields use #81976b"
},
{
"fg": "#b9c4ab",
"bg": "#ffffff",
"ratio": 1.82,
"pass": "known gap",
"use": "Chat home and first-post box edges today; new fields use #81976b"
}
],
"fonts": {
"sans": {
"family": "DM Sans",
"stack": "\"DM Sans\", ui-sans-serif, system-ui, sans-serif",
"weights": [
400,
500,
600,
700
],
"use": "Body, controls, labels, room text, notice titles, everything that is not a page, card or room title",
"note": "The app also asks for 650 in a few places; with the loaded weights it draws as 700."
},
"serif": {
"family": "Newsreader",
"fallback": "Source Serif 4",
"stack": "\"Newsreader\", \"Source Serif 4\", Georgia, serif",
"weights": [
500,
600
],
"use": "Page titles, panel and dialog titles, Chat home headings, card titles"
},
"room_serif": {
"family": "Source Serif 4",
"fallback": "Newsreader",
"stack": "\"Source Serif 4\", \"Newsreader\", Georgia, serif",
"weights": [
600,
700
],
"use": "Room titles, room dialogs and sheets, People to say hi to"
},
"room_info_letter": "The phone's Room info button draws its i in Georgia 700 17px.",
"google_fonts_url": "https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&family=Newsreader:opsz,wght@6..72,500;6..72,600&family=Source+Serif+4:opsz,wght@8..60,500;8..60,600;8..60,700&display=swap",
"csp": "The site's security rules allow style sheets from fonts.googleapis.com only. Load fonts with a link tag, never @import in an inline style."
},
"type_scale": [
{
"role": "brand",
"family": "DM Sans",
"fallback": "system-ui",
"weight": 700,
"size_px": 29,
"line_height": 1,
"letter_spacing_px": -1,
"use": "The FedM8 wordmark in the header (22px on a phone)"
},
{
"role": "page-title",
"family": "Newsreader",
"fallback": "Source Serif 4",
"weight": 500,
"size_px": 31,
"line_height": 1.18,
"letter_spacing_px": -0.8,
"use": "One per screen, the h1 (28px on a phone)"
},
{
"role": "panel-title",
"family": "Newsreader",
"fallback": "Source Serif 4",
"weight": 500,
"size_px": 27,
"line_height": 1.25,
"letter_spacing_px": -0.5,
"use": "A large panel or section"
},
{
"role": "dialog-title",
"family": "Newsreader",
"fallback": "Source Serif 4",
"weight": 500,
"size_px": 26,
"line_height": 1.3,
"letter_spacing_px": -0.4,
"use": "The help dialog (24px on a phone)"
},
{
"role": "chat-home-heading",
"family": "Newsreader",
"fallback": "Source Serif 4",
"weight": 600,
"size_px": 21,
"line_height": 1.25,
"letter_spacing_px": 0,
"use": "Ask your people (19px on a phone)"
},
{
"role": "room-dialog-title",
"family": "Source Serif 4",
"fallback": "Newsreader",
"weight": 600,
"size_px": 20,
"line_height": 1.3,
"letter_spacing_px": 0,
"use": "Remove your post? and other room dialogs"
},
{
"role": "room-title",
"family": "Source Serif 4",
"fallback": "Newsreader",
"weight": 600,
"size_px": 19,
"line_height": 1.3,
"letter_spacing_px": 0,
"use": "A room's name"
},
{
"role": "sheet-title",
"family": "Source Serif 4",
"fallback": "Newsreader",
"weight": 600,
"size_px": 18,
"line_height": 1.3,
"letter_spacing_px": 0,
"use": "Room info and other phone sheets"
},
{
"role": "card-title",
"family": "Newsreader",
"fallback": "Source Serif 4",
"weight": 600,
"size_px": 17,
"line_height": 1.3,
"letter_spacing_px": 0,
"use": "Chat home rail cards, the first-post card"
},
{
"role": "people-title",
"family": "Source Serif 4",
"fallback": "Newsreader",
"weight": 600,
"size_px": 16,
"line_height": 1.3,
"letter_spacing_px": 0,
"use": "People to say hi to"
},
{
"role": "notice-title",
"family": "DM Sans",
"fallback": "system-ui",
"weight": 500,
"size_px": 16,
"line_height": 1.4,
"letter_spacing_px": 0,
"use": "A notice or grant title on a result card"
},
{
"role": "heading",
"family": "DM Sans",
"fallback": "system-ui",
"weight": 600,
"size_px": 15,
"line_height": 1.45,
"letter_spacing_px": 0,
"use": "Panel headings, small section heads"
},
{
"role": "body",
"family": "DM Sans",
"fallback": "system-ui",
"weight": 400,
"size_px": 14,
"line_height": 1.55,
"letter_spacing_px": 0,
"use": "Running text"
},
{
"role": "post",
"family": "DM Sans",
"fallback": "system-ui",
"weight": 400,
"size_px": 13.5,
"line_height": 1.55,
"letter_spacing_px": 0,
"use": "Words in a room post"
},
{
"role": "second",
"family": "DM Sans",
"fallback": "system-ui",
"weight": 400,
"size_px": 13,
"line_height": 1.6,
"letter_spacing_px": 0,
"use": "Second lines, notes, gates (muted)"
},
{
"role": "control",
"family": "DM Sans",
"fallback": "system-ui",
"weight": 500,
"size_px": 12,
"line_height": 1.4,
"letter_spacing_px": 0,
"use": "Buttons, section tabs"
},
{
"role": "meta",
"family": "DM Sans",
"fallback": "system-ui",
"weight": 400,
"size_px": 11.5,
"line_height": 1.5,
"letter_spacing_px": 0,
"use": "Times, roles, small pills (muted)"
},
{
"role": "label",
"family": "DM Sans",
"fallback": "system-ui",
"weight": 600,
"size_px": 10,
"line_height": 1.5,
"letter_spacing_px": 1,
"uppercase": true,
"use": "Rail group labels, kickers"
},
{
"role": "metric",
"family": "DM Sans",
"fallback": "system-ui",
"weight": 500,
"size_px": 25,
"line_height": 1.2,
"letter_spacing_px": 0,
"use": "A number in a metric tile"
}
],
"radius": {
"rail_mark": "2px",
"chip": "4px",
"scope_tab": "4px",
"plan_tile": "4px",
"button": "5px",
"field": "5px",
"rail_link": "5px",
"post": "6px",
"room_button": "6px",
"callout": "6px",
"card": "8px",
"panel": "8px",
"menu": "8px",
"dialog": "10px",
"match_box": "10px",
"phone_sheet": "14px 14px 0 0",
"pill": "999px"
},
"shadow": {
"card": "0 1px 3px #29372e04",
"menu": "0 8px 25px #29372e16",
"room_menu": "0 8px 24px #29372e2e",
"dialog": "0 18px 80px #1f2f2540",
"room_dialog": "0 12px 40px #29372e40",
"phone_sheet": "0 -6px 28px #29372e33",
"phone_dock": "0 -2px 12px #29372e06",
"pinned_box": "0 -4px 14px #29372e14",
"new_replies_pill": "0 2px 6px #29372e33",
"toast": "0 6px 20px #29372e40",
"rule": "Hairlines first. A shadow only lifts something that floats: a menu, a dialog, a sheet, the dock."
},
"spacing": {
"scale_px": {
"4": "Inside a chip: icon to word",
"6": "A plan tile after its tool's name; chips in a row",
"8": "Between buttons; small stacks",
"10": "Between cards in a list and posts in a room",
"12": "Inside a post; the composer",
"14": "Inside a result card",
"16": "Between page head and tabs; the Match-M8 box",
"20": "Panel sides; Chat home columns",
"22": "Between section tabs",
"24": "Top of the content; dialog padding",
"28": "Header sides; left of the rail; right of the content",
"30": "Rail to content",
"44": "The smallest target a finger presses"
},
"touch_target_min_px": 44,
"card_padding_px": 14,
"panel_padding": "18px 20px",
"post_padding_px": {
"desktop": 12,
"phone": 10
}
},
"layout": {
"desktop": {
"check_at": "1440 x 1000",
"header_height_px": 64,
"header_sides_px": 28,
"rail_width_px": 190,
"rail_left_px": 28,
"rail_to_content_px": 30,
"content_starts_px": 248,
"content_top_px": 24,
"content_right_px": 28,
"content_bottom_px": 40,
"widest_px": 1454,
"header": "Logo 40px and the FedM8 wordmark on the left; Inbox and My Profile as 44px icon buttons on the right",
"rail_groups": [
"Community",
"Opportunities",
"Readiness",
"Your workspace (below a line)"
],
"page_order": [
"page head: 31px serif title and a 44px round ? button",
"public scope tabs where a section has them",
"section tabs",
"the work"
],
"public_scope_tabs": "48px strip, #e8ebdf with a #d2d9c8 edge, 6px corners, 3px inside; 44px buttons; the pressed one olive with paper words",
"section_tabs": "44px tall, 22px apart, 12px muted words; the current one dark olive 600 with a 2px olive underline"
},
"phone": {
"check_at": "375 x 812",
"breakpoint": "760px and under",
"header_height_px": 59,
"page_sides_px": 13,
"content_padding": "17px 13px 24px",
"dock_height_px": 78,
"dock": [
"Chat",
"Veterans",
"Contracts",
"Grants",
"Certify",
"Learn"
],
"dock_look": "Six equal columns, paper, #cdd5bf line above, shadow 0 -2px 12px #29372e06; 20px icons over 11px words; the current one dark olive 600 on #e5ebd9",
"header_buttons": "People, Private chats, Inbox and My Profile as 44px icon buttons",
"rules": [
"One column",
"No sideways scrolling at 375px",
"16px text in boxes so the phone does not zoom",
"Every control 44 x 44"
]
}
},
"components": {
"button": {
"app_markup": "<button type=\"button\" class=\"btn\">Save and continue</button>",
"size": "44px tall, 8px 13px inside, 5px corners, DM Sans 500 12px",
"main": "Olive #526547 with paper words; #3e5234 under the pointer. One per view.",
"ghost": "class=\"btn ghost\": paper, 1px #cbd4bf edge, dark olive words; #edf1e5 with a #aebf9c edge under the pointer",
"danger": "class=\"btn danger\": #fff5f1, #d9b2a9 edge, #9a302d words",
"disabled": "55% opacity"
},
"field": {
"size": "44px tall, 8px 10px inside, 5px corners, 13px words (16px on a phone)",
"edge": "#81976b in the content; 2px ink edge when aria-invalid",
"label": "A visible label above: DM Sans 600 12px ink. Hint 12px muted, tied with aria-describedby.",
"placeholder": "#6a7565, never the only label",
"disabled": "#cbd4bf edge, #f1f2ee fill, #7d8778 words",
"checkbox": "20px, olive accent color"
},
"card": {
"look": "Paper, 1px #d9ded0 edge, 8px corners, 14px inside, shadow 0 1px 3px #29372e04",
"selected": "Edge #b8c5aa and a 2px #81976b bar inside the left edge",
"title": "DM Sans 500 16px ink",
"second_line": "12px muted",
"foot": "12px muted; the Talk door goes here"
},
"panel": "Paper, 1px line, 8px corners, 18px 20px inside; heading DM Sans 600 15px; text 13px muted",
"metric": "Paper tile, 14px 16px; label 10px 600 capitals muted; number DM Sans 500 25px ink",
"chip": {
"plain": "3px 7px, 1px line, 4px corners, #eef1e7 fill, #42533a words, 11px",
"due": "#fff2d8 fill, #eddbb6 edge, #825322 words",
"count": "Round, mint #d9eddd fill, #c5ddc9 edge, #31553b words 12px 600",
"kind": "Round, 22px, soft fill, dark olive 11.5px 600; a grant #e9f4ea; a code #f6efdc",
"new": "Round, #e6ecdd fill, #cbd4bf edge, dark olive 11px 600"
},
"callout": "#f0f4e8 fill, #cfd8c2 edge, 6px corners, 12px inside, 13px 500 ink",
"lede": "Soft fill, 2px #81976b bar on the left, 0 4px 4px 0 corners, 11px 13px inside, 13px ink",
"help_dialog": {
"look": "520px at most, 24px inside, 1px #cbd4bf edge, 10px corners, paper, shadow 0 18px 80px #1f2f2540, scrim #23302366",
"title": "Newsreader 500 26px",
"close": "44 x 44, 1px line, 5px corners"
},
"rail": {
"link": "44px tall, 10px inside, 5px corners, DM Sans 13px muted, 18px icon",
"hover": "#ebeee3 fill, dark olive words",
"current": "#e4ead8 fill, dark olive 600, a 3px olive bar inside the left edge",
"label": "DM Sans 600 10px capitals, 1px letter spacing, #5d6958"
},
"plan_tile": {
"files": [
"assets/plan-tile.css",
"assets/plan-tile.js"
],
"plan_source": "FedM8Tier.minPlanFor(featureId) in tier.js",
"size_px": 16,
"radius_px": 4,
"font": "DM Sans 700 10px",
"gap_after_name_px": 6,
"hit_area_px": 44,
"basic": {
"letter": "B",
"ink": "#526547",
"fill": "transparent",
"edge": "#b8c5aa"
},
"pro": {
"letter": "P",
"ink": "#344b2c",
"fill": "#e4ead8",
"edge": "#b8c5aa"
},
"variants": {
"plan-tile--flush": "No gap, for a flex row that has its own gap",
"plan-tile--lg": "18px with an 11px letter, next to a heading",
"plan-tile--word": "The word Basic or Pro, 10.5px 600, for menus and lists with room",
"plan-tile--on-dark": "White letter and a 62% white edge, on olive or dark"
},
"viewer_has_it": "55% opacity, no link, read aloud \"Included in your plan: Basic\", label \"In your plan\" (FedM8PlanTile.apply)",
"markup_link": "<a class=\"plan-tile\" data-plan=\"basic\" href=\"/plans#basic\" aria-label=\"Basic plan feature. See plans\" data-tip=\"Basic plan\">B</a>",
"markup_from_tier": "<a class=\"plan-tile\" data-plan-feature=\"saved_searches\"></a>",
"markup_inside_control": "<button type=\"button\" class=\"btn ghost\" aria-label=\"Save this search (Basic plan)\">Save this search<span class=\"plan-tile plan-tile--flush\" data-plan=\"basic\" aria-hidden=\"true\">B</span></button>",
"free_line": "<p class=\"plan-lock\" data-plan=\"basic\"><span class=\"plan-tile\" data-plan=\"basic\" aria-hidden=\"true\">B</span>Match-M8 matches are part of Basic. <a href=\"/plans#basic\">See plans</a></p>",
"assignments": [
{
"feature": "Notices, Grants, Chat",
"tier_ids": [
"opportunities",
"grants",
"chat"
],
"tile": "none"
},
{
"feature": "Match-M8 matches with reasons",
"tier_ids": [
"found_for_you"
],
"tile": "B"
},
{
"feature": "Saved searches with alerts",
"tier_ids": [
"saved_searches"
],
"tile": "B"
},
{
"feature": "Bid Coach",
"tier_ids": [
"bid_coach"
],
"tile": "B"
},
{
"feature": "My pursuits",
"tier_ids": [
"pipeline"
],
"tile": "B"
},
{
"feature": "Win Kit and Award Intel",
"tier_ids": [
"award_intel"
],
"tile": "P",
"note": "Win Kit has no id of its own yet"
},
{
"feature": "Proposal help",
"tier_ids": [
"proposal_assist"
],
"tile": "P"
},
{
"feature": "Company workspace",
"tier_ids": [
"company_workspace"
],
"tile": "none",
"note": "Company seats are not sold"
}
],
"rules": [
"One tile per tool, right after its name, on the same line, 6px away",
"Free features get no tile; Pro includes AI, so there is no AI tile",
"Read the plan from tier.js, never type it",
"Inside a button, tab or link the tile is aria-hidden and the control's name says (Basic plan)",
"See plans is the only upgrade link; no Upgrade, Unlock, Go Pro, lock icons, blur or banners"
]
},
"chat_home": {
"drawn_by": "FedM8ChatHome.render (assets/chat-home.js)",
"grid": "My rooms 190px to 220px, the middle takes the rest, rail 240px to 290px; 16px between rows, 20px between columns; 1180px widest",
"my_rooms": "Paper card; rows 38px, DM Sans 13px; the current row #e4ead8 with a 3px olive bar inside its left edge; group titles 11.5px muted",
"ask": "Paper card 16px 18px; Newsreader 600 21px heading; a white box with a #b9c4ab edge, 6px corners, 72px tall; Post 40px olive",
"post": "Paper card 13px 15px; 34px avatar on #dfe7d3; name 600 13.5px; words 14px, five lines at most",
"unanswered": "#f7f0dc fill, #e3d6ae edge, title #5a4a17",
"rail": "The topic photo (118px), then one card at a time: kicker #6b5a1f, Newsreader 600 17px title, round chips 11.5px",
"phone": "One column: Ask, Say hello, My rooms as one sideways row of 44px pills, the stream, the rail. No topic photo."
},
"room": {
"mount": "FedM8Room.mount (assets/fedm8-room.js, assets/fedm8-room.css)",
"title": "Source Serif 4 600 19px",
"scope_tabs": "This contract · NAICS 541519 · Live All. 36px (44px on a phone), 6px corners; the pressed one soft with a line edge, dark olive 600",
"post": "Paper, 1px line, 6px corners, 12px inside (10px on a phone); yours #fbfcf6; held for review dashed; FedM8 AI #fbf7e9 with a #eadfb8 edge; the accepted answer #f2f8ef with a #a9c9a2 edge",
"author": "30px round avatar on soft (a 44px button on a phone); name dark olive 600 13px; role and time 11.5px muted",
"words": "13.5px ink, line breaks kept",
"actions": "Helpful · M8 N · Reply · ⋯. 32px (44px on a phone), 12.5px dark olive; Helpful pressed #e8eedf with a #c9d4bb edge",
"menu": "200px to 260px, 6px inside, 1px line, 8px corners, shadow 0 8px 24px #29372e2e; rows 40px 13.5px; Report · Hide this person · Remove mine · People you hid",
"replies": "Under a 2px line on the left, 12px in; the toggle 32px (44px on a phone), 12.5px dark olive",
"new_replies_pill": "Olive, white 13px 600, 34px, round, shadow 0 2px 6px #29372e33",
"host_card": "FedM8 AI · not a member. Paper, 1px line with a 3px olive left edge, 6px corners, 12px 14px inside; links dark olive 600",
"followed_note": "3px olive bar on the left, #f4f6ee fill, 12.5px muted: You follow this thread because you posted it."
},
"composer": {
"box": "Paper, 1px line, 6px corners, 12px inside",
"rules_line": "12.5px muted (12px, two lines at most, on a phone)",
"input": "White, #c9d1bd edge, 6px corners, 72px tall, 15px words. On a phone: at least 44px, 16px words, and tall enough that the whole placeholder shows",
"post_button": "Olive, white 13px 600, 36px (44px on a phone, 64px wide), 6px corners",
"destination": "12px muted: This will post in: …",
"kept": "Not sent yet (kept in this tab), 12px muted italic",
"phone": "Pinned above the dock: paper, 1px line above, shadow 0 -4px 14px #29372e14, 8px 12px 10px inside; grows to 52% of the screen while writing"
},
"follow": {
"drawn_by": "FedM8Follow.button (assets/talk-follow.js)",
"look": "Round, 32px (44px on a phone), 1px line, paper, dark olive 12.5px 600, 14px icon; Following has an olive edge on soft; the big one 36px with an olive edge",
"words": [
"Follow",
"Following"
]
},
"whos_here": {
"drawn_by": "FedM8Teaming.whosHere (assets/teaming.js)",
"card": "Paper, 1px line, 8px corners, 12px 14px inside (10px 12px on a phone)",
"line": "3 raised a hand · no sub yet · 1 online now. Count 700; the gap pill #e5ecdb with a #c3d0b2 edge; an 8px #2f7d4a dot before online",
"join": "I'm in as: Prime · Sub · Independent specialist. A 1px line box with 8px corners; choices 36px (44px on a phone), 13px 600 dark olive; the pressed one olive with white words; the focus ring sits inside",
"say_hi": "Cards on #fdfdf8 with 6px corners; 32px avatar with a 9px online dot; Say hi olive 36px. On a phone one line: Say hi: names · See why · Hide"
},
"first_post": {
"drawn_by": "FedM8FirstPost.create (assets/first-post.js)",
"card": "#f6f8f1 fill, 1px #cbd4bf edge, 8px corners, 14px 16px inside (12px on a phone); title Newsreader 600 17px",
"choices": "Round, 38px (44px on a phone), white with a #b9c4ab edge; the pressed one #e4ead8 with an olive edge, dark olive 600",
"input": "40px (44px on a phone), white, #b9c4ab edge, 5px corners, 14px",
"status": "#fbf7ea fill, #d9d2b6 edge, 6px corners, 13px"
},
"talk_door": {
"drawn_by": "FedM8TalkDoors.chip (assets/talk-doors.js, assets/talk-doors.css)",
"chip": "Round, 34px (44px on a phone), 1px olive edge, no fill, dark olive 600 13px, 14px speech-bubble icon, #eef2e6 under the pointer, count in tabular figures. The one main door on a page may be filled olive.",
"who_is_in": "12.5px muted after the chip: 4 in · 1 prime",
"latest_words": "On a card: a 1px line above, then one line, 12.5px muted, cut with an ellipsis; the name 600 ink",
"free": "Talking is free on every plan, so a door never carries a plan tile"
},
"grant_door": {
"look": "44px buttons, 0 16px inside, 6px corners, 600 14px. Talk about this grant · N olive with paper words; Find a partner and Watch paper with a #81976b edge and dark olive words; #eef2e6 under the pointer",
"group_name": "Talk, team up or watch this grant",
"phone": "Sticks 59px from the top under the header; paper; #dfe5d4 line below; Talk grows to fill the row; words Talk · N · Partner · Watch",
"source": "assets/os-grants.css"
},
"phone_room_bar": {
"look": "Under the 59px header: paper, 1px line below, 4px 2px inside the page's 13px sides",
"back": "44 x 44, a 22px arrow in dark olive; read aloud Back to Chat",
"title": "DM Sans 650 15px ink on one line, cut with an ellipsis",
"room_info": "44px round, 1px line edge, paper, dark olive Georgia 700 17px i; read aloud Room info",
"source": "assets/commons-feed.css"
},
"sheet": {
"room_info": "Rises from the bottom: paper, 14px top corners, shadow 0 -6px 28px #29372e33, 82% of the screen at most, scrim #1b241e66; grip 40 x 4 #cdd5bf; title Source Serif 4 600 18px; Close 44px tall and 64px wide at least; a dialog named by its title",
"menu": "The ⋯ menu on a phone: 14px top corners, 1px line, shadow 0 8px 24px #29372e2e, scrim #1d2a2140; grip 40 x 4 #d9ded0; rows 48px, 15px",
"source": "assets/commons-feed.css (Room info), assets/fedm8-room.css (menu)"
},
"room_dialog": {
"look": "460px at most, 20px inside, 1px line, 10px corners, paper, shadow 0 12px 40px #29372e40, scrim #1d2a2140",
"title": "Source Serif 4 600 20px",
"text": "13px muted",
"remove_button": "#8f2d22 with white words",
"words": [
"Remove your post?",
"It comes down for good, with any replies under it.",
"Cancel",
"Remove"
]
},
"match_box": {
"look": "#f0f4e8 fill, #cfd8c2 edge, 10px corners, 16px inside",
"big_line": "16px 700 #31553b",
"reasons": "A list, 15px, 1.6 line height",
"name": "Match-M8"
},
"win_kit": {
"look": "Paper, 1px line with a 4px olive top edge, 8px corners, 16px 18px inside",
"heading": "DM Sans 600 16px with a 1px line under it, then the P tile",
"job": "15px ink",
"rows": "14px with a 1px line between; amounts #31553b",
"tag": "Round, canvas fill, #cbd4bf edge, 11.5px 700 muted",
"quiet": "13px muted"
},
"topic_photo": {
"look": "6px paper frame, 1px line, 8px corners; the image 170px to 230px tall with 4px corners, cropped to fill",
"chat_home": "5px frame, 118px image",
"phone": "5px frame, 96px image; none on Chat home",
"rule": "Placed by assets/approved-design.js with its own alt text. Never add one yourself."
},
"states": {
"loading": "One 13px muted line: Loading…",
"empty": "Paper, 1px dashed #cbd4bf edge, 8px corners, 13px muted",
"could_not_load": "#fbf4e8 fill, #e3c9a6 edge, 6px corners, words #5b3a12 13px, Try again olive 44px with white words",
"heads_up": "#fbf3dc fill, #e3cf94 edge, words #5c4708, ! in a 20px ring, Edit and Why 30px (44px on a phone); role=status",
"refused": "#fbecea fill, #e2b8b2 edge, words #6d231b; role=alert",
"gate": "13px muted, one link at most: dark olive 600, underlined",
"field_problem": "12.5px #8f2d22 under the field, which is marked aria-invalid and takes focus"
},
"toast": {
"look": "Dark olive #344b2c, white 13.5px, 8px corners, 10px 16px inside, 520px at most, 24px from the bottom, centered, shadow 0 6px 20px #29372e40",
"words": [
"Posted.",
"Reply posted.",
"Reported. FedM8 will look at it.",
"Removed.",
"Marked as the answer."
]
},
"comments_box": {
"markup": "<div class=\"pc\" data-page-comments data-topic=\"PAGE-KEY\" data-page-title=\"PAGE TITLE\"></div>",
"files": [
"/assets/page-comments.css",
"/assets/page-comments.js"
],
"rule": "Every page carries Chat or a comments box. Set the --pc- variables on body for this design."
}
},
"words": {
"source": "One table per file, such as assets/chat-words.js (FedM8ChatWords) for Chat. Read words from there; never retype them.",
"voice": [
"Say what is true, then the next step.",
"Short sentences a busy owner reads once. One idea each.",
"Define a term where it appears, in a few words.",
"Use the names members know: My Profile, Support, the contracting officer.",
"Stay calm: no exclamation marks, no Oops, no capitals for stress.",
"No sales words: unlock, supercharge, don't miss out, exclusive.",
"Give the real count or none. Say where a fact comes from.",
"Keep the member's words safe, and say so: Your words are still in the box."
],
"say_not": [
{
"say": "Chat (in the app), Contract Chat (its public name)",
"not": "Forum, board, Commons"
},
{
"say": "room",
"not": "channel, group, thread list"
},
{
"say": "Post, Post reply",
"not": "Submit, Publish, Send (in a room); a private chat says Send"
},
{
"say": "Helpful · M8 N",
"not": "Like, upvote, thumbs up"
},
{
"say": "Follow, Following",
"not": "Subscribe, Watch (in a room); Watch is for notices and grants"
},
{
"say": "Report, Hide this person, Remove mine",
"not": "Flag, Block, Delete"
},
{
"say": "FedM8 AI · not a member",
"not": "bot, assistant, moderator"
},
{
"say": "Match-M8",
"not": "any engine, model or vendor name, the algorithm"
},
{
"say": "Certify (dock), Get Certified (rail and titles)",
"not": "Certs, Certification Center"
},
{
"say": "independent specialist",
"not": "1099, freelancer"
},
{
"say": "See plans",
"not": "Upgrade, Unlock, Go Pro"
}
],
"chat_states": {
"note": "refused_pricing and send_fail are built by FedM8ChatWords.refused(input, \"post\"); call it rather than copying them.",
"loading": "Loading…",
"empty_room": "Nobody has posted yet. Ask a question or share what you know.",
"read_fail": "Chat could not load. Check your connection, then try again.",
"draft_kept": "Not sent yet (kept in this tab)",
"refused_pricing": "We didn't post this. It looks like pricing, and prices stay out of open rooms. Share prices only privately with teammates, under a signed teaming agreement. Your words are still in the box.",
"send_fail": "We couldn't post this. Your words are still in the box. Check your connection, then try again.",
"ack_first": "Check the box first. It takes a second.",
"retry": "Try again"
},
"samples": "Fictional and labelled Sample: Example Help Desk LLC, Dana R., Marcus T., Lena K., Example Network Services. No real people, emails or phone numbers."
},
"naming": {
"matching_ai": "Match-M8",
"matching_ai_rule": "Match-M8 is the product name of the matching AI. Never show an engine or vendor name.",
"room_host": "FedM8 AI",
"room_host_line": "FedM8 AI · not a member",
"chat_public": "Contract Chat",
"chat_app": "Chat",
"conversation": "room",
"action_word": "Post",
"helpful_mark": "Helpful · M8 N",
"company": "FedM8"
},
"accessibility": {
"standard": "WCAG 2.2 AA; the release check allows no serious or critical findings",
"text_contrast_min": 4.5,
"non_text_contrast_min": 3,
"touch_target_min_px": 44,
"focus_ring": "2px olive #526547 (3px on large controls), 2px off the edge, never removed; inside a segmented control the ring sits inside the button",
"headings": "One h1 per screen, then h2 and h3 in order",
"names": "Every icon-only control has a name; a control that shows words has a name that starts with them",
"read_aloud": "Heads-up role=status, refusal role=alert, toasts and the first-post step line role=status",
"keyboard": "The ⋯ menu: role=menu, arrow keys, Escape. Scope tabs: role=tablist, arrows, Home, End. Dialogs and sheets keep focus inside, close on Escape and return focus.",
"color": "Never the only signal: Answered has a check mark and a word, online has Online now, a plan has its letter",
"motion": "No transitions when the device asks for reduced motion. New posts never move the page.",
"phone": "No sideways scrolling at 375px; 16px text in boxes; pages work at 200% zoom",
"light_only": "The design is light only. No dark theme."
},
"rules": [
"Use design 002 for the app and every new screen. Use 001 only for brand marks, walkthrough videos, YouTube thumbnails, social posts and print.",
"Build with the app's own parts and words: assets/approved-design.css, FedM8Room.mount, FedM8ChatWords.",
"Take colors only from the nine --fd- variables or the named hex values in this file. No new hex, no gradients, no glows, no dark theme.",
"Newsreader (then Source Serif 4) for page and card titles, Source Serif 4 for room titles, DM Sans for everything else.",
"One olive button per view. Everything else is a ghost button or a link.",
"Hairlines before shadows. Shadows only on things that float.",
"Every control 44 x 44 on a phone, with a visible olive focus ring.",
"Every page carries Chat or a comments box.",
"A plan tile after each paid tool, read from tier.js. Free features get no tile. See plans is the only upgrade link.",
"States in words, and the member's words survive every failure.",
"Call the matching AI Match-M8. Never show an engine or vendor name.",
"No inline styles, style attributes, inline scripts or inline event handlers: the site's security rules block them.",
"Samples are fictional and labelled Sample."
],
"unconfirmed": [
"The --fd- names beyond the core nine are this file's names for hex values in the app files; the app has no such variables.",
"Chat home's could-not-load line and the shared room's could-not-load line still use their own fills and a paper Try again button; this file follows the filled olive Try again in assets/approved-design.css.",
"Live toasts are not all this dark olive. assets/approved-design.css .crx-toast is ink #29372e on paper words, and the in-app toast sets an inline #1a1d21 fill.",
"Room box edge #c9d1bd and Chat home box edge #b9c4ab are the known-gap contrast rows above. New fields use #81976b.",
"The folded phone box in assets/fedm8-room.css is fixed at 44px and cuts off its placeholder. This sample grows so the whole placeholder shows.",
"On a phone, assets/teaming.css makes I'm in as full width. The label only has a border-right, so a wrap has no divider under the label. This sample keeps the divider.",
"os.html does not load assets/plan-tile.js, so the live app shows no B or P tiles. For you is not a rail item; it sits under Contracts as Award search.",
"The scale and role names (page-title, room-title and the rest) are this file's names for sizes the app uses; the app has no type tokens."
],
"retired": "2026-11-02",
"replaced_by": "https://fedm8.com/design/003/tokens.json"
}design-002.css
/* Design 002 · Green and white: the approved FedM8 app design.
Tokens sit on body, not :root, because the Tweak panel writes overrides inline on <body>.
Values are copied from assets/approved-design.css and the Chat files (fedm8-room.css,
chat-home.css, first-post.css, talk-doors.css, talk-follow.css, teaming.css, room-extras.css).
Every sample selector starts with .x2- so nothing here reaches the documentation shell. */
body[data-design="002"] {
--fd-bg: #f5f3ec;
--fd-paper: #fffef9;
--fd-soft: #eef1e7;
--fd-ink: #29372e;
--fd-muted: #586653;
--fd-line: #d9ded0;
--fd-green: #526547;
--fd-green-dark: #344b2c;
--fd-mint: #d9eddd;
--fd-line-2: #cbd4bf;
--fd-field-line: #81976b;
--fd-hover: #ebeee3;
--fd-hover-2: #edf1e5;
--fd-active: #e4ead8;
--fd-chip: #eef1e7;
--fd-chip-ink: #42533a;
--fd-callout: #f0f4e8;
--fd-callout-line: #cfd8c2;
--fd-selected-line: #b8c5aa;
--fd-selected-bar: #81976b;
--fd-olive-hover: #3e5234;
--fd-link: #435e36;
--fd-label: #5d6958;
--fd-count-ink: #31553b;
--fd-count-line: #c5ddc9;
--fd-due-ink: #825322;
--fd-due-bg: #fff2d8;
--fd-due-line: #eddbb6;
--fd-ai-bg: #fbf7e9;
--fd-ai-line: #eadfb8;
--fd-ai-mark: #efe2b5;
--fd-amber: #fbf3dc;
--fd-amber-line: #e3cf94;
--fd-amber-ink: #5c4708;
--fd-fail-bg: #fbf4e8;
--fd-fail-line: #e3c9a6;
--fd-fail-ink: #5b3a12;
--fd-red: #8f2d22;
--fd-red-soft: #fbecea;
--fd-online: #2f7d4a;
--fd-answered: #2f6b3a;
--fd-placeholder: #6a7565;
--fd-selection: #dce8cd;
--fd-scrim: #23302366;
--fd-radius: 8px;
--fd-radius-control: 5px;
--fd-radius-room: 6px;
--fd-radius-dialog: 10px;
--fd-radius-pill: 999px;
--fd-shadow-card: 0 1px 3px #29372e04;
--fd-shadow-menu: 0 8px 25px #29372e16;
--fd-shadow-room-menu: 0 8px 24px #29372e2e;
--fd-shadow-dialog: 0 18px 80px #1f2f2540;
--fd-shadow-dock: 0 -2px 12px #29372e06;
--fd-shadow-pill: 0 2px 6px #29372e33;
--fd-font-sans: "DM Sans", ui-sans-serif, system-ui, sans-serif;
--fd-font-serif: "Newsreader", "Source Serif 4", Georgia, serif;
--fd-font-room: "Source Serif 4", "Newsreader", Georgia, serif;
--fd-header-h: 64px;
--fd-rail-w: 190px;
--fd-content-x: 248px;
--fd-max: 1454px;
--fd-target: 44px;
--fd-phone-header-h: 59px;
--fd-dock-h: 78px;
--ds-bg: var(--fd-bg);
--ds-surface: var(--fd-paper);
--ds-ink: var(--fd-ink);
--ds-muted: var(--fd-muted);
--ds-line: var(--fd-line);
--ds-accent: var(--fd-green);
--ds-accent-ink: #fff;
--ds-soft: var(--fd-soft);
--ds-focus: var(--fd-green);
--ds-font-sans: "DM Sans", system-ui, sans-serif;
--ds-font-serif: "Source Serif 4", Georgia, serif;
--ds-radius: 8px;
--plan-b-ink: #526547;
--plan-b-bg: transparent;
--plan-b-line: #b8c5aa;
--plan-p-ink: #344b2c;
--plan-p-bg: #e4ead8;
--plan-p-line: #b8c5aa;
--plan-lock-ink: var(--fd-muted);
--plan-lock-link: var(--fd-green-dark);
--plan-view-line: var(--fd-line);
--plan-view-bg: var(--fd-soft);
--plan-view-ink: var(--fd-muted);
--plan-view-on: var(--fd-paper);
--plan-view-ink-on: var(--fd-ink);
--pc-surface: var(--fd-paper);
--pc-ink: var(--fd-ink);
--pc-muted: var(--fd-muted);
--pc-line: var(--fd-line);
--pc-line-strong: var(--fd-field-line);
--pc-accent: var(--fd-green);
--pc-accent-ink: #fff;
--pc-act-ink: var(--fd-green-dark);
--pc-soft: var(--fd-soft);
--pc-radius: 8px;
--pc-font: "DM Sans", system-ui, sans-serif;
color-scheme: light;
}
body[data-design="002"] ::selection { background: var(--fd-selection); color: #253323; }
/* ---------- Sample base ---------- */
.x2 { font: 400 14px/1.55 var(--fd-font-sans); color: var(--fd-ink); text-align: left; -webkit-font-smoothing: antialiased; }
.x2 :where(p, h1, h2, h3, h4, ul, ol, li, dl, dt, dd, figure, fieldset, legend) { margin: 0; padding: 0; }
.x2 :where(ul, ol) { list-style: none; }
.x2 :where(fieldset) { border: 0; min-width: 0; }
.x2 :where(button, input, select, textarea) { margin: 0; font: inherit; color: inherit; }
.x2 :where(button) { cursor: pointer; }
.ds .x2 :where(a) { color: var(--fd-link); }
.x2 .x2-ic { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.x2 :focus-visible { outline: 3px solid var(--fd-green); outline-offset: 3px; }
.x2 :is(input, select, textarea):focus-visible { outline-offset: 1px; }
.x2 :is(.x2-room, .x2-ch, .x2-here, .x2-hi, .x2-fp, .x2-phone, .x2-chiprow, .x2-tiles) :focus-visible { outline-width: 2px; outline-offset: 2px; }
.x2 .is-focus { outline: 3px solid var(--fd-green); outline-offset: 3px; }
.x2 .x2-input.is-focus { outline-offset: 1px; }
.x2 .is-focus-sm { outline: 2px solid var(--fd-green); outline-offset: 2px; }
.x2 [hidden] { display: none !important; }
.x2 a.plan-tile { color: var(--pt-ink); }
.x2-only-narrow { display: none; }
.x2-vh { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
/* ---------- Documentation helpers ---------- */
.x2-principles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 16px 0; }
.x2-principle { padding: 16px 18px; border: 1px solid var(--fd-line); border-radius: 8px; background: var(--fd-paper); }
.x2-principle h3 { margin: 0 0 6px; font: 600 15px/1.4 var(--fd-font-sans); color: var(--fd-ink); }
.x2-principle p { margin: 0; font-size: 13px; line-height: 1.6; color: var(--fd-muted); }
.x2-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; }
.x2-caption { margin: 8px 0 0; font-size: 12px; line-height: 1.5; color: var(--fd-muted); }
.x2-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
.x2-mt { margin-top: 12px; }
.x2 .x2-w-search { flex: 1 1 260px; width: auto; max-width: 420px; }
.x2-stack { display: grid; gap: 14px; }
.x2-statehead { margin: 0 0 6px; font: 600 11px/1.5 var(--fd-font-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--fd-muted); }
.x2-pair { display: inline-flex; align-items: center; justify-content: center; min-width: 52px; height: 30px; padding: 0 10px; border: 1px solid var(--fd-line); border-radius: 4px; font: 600 13px/1 var(--fd-font-sans); }
.x2-pair--ink-paper { color: #29372e; background: #fffef9; }
.x2-pair--ink-canvas { color: #29372e; background: #f5f3ec; }
.x2-pair--muted-paper { color: #586653; background: #fffef9; }
.x2-pair--muted-canvas { color: #586653; background: #f5f3ec; }
.x2-pair--muted-soft { color: #586653; background: #eef1e7; }
.x2-pair--paper-olive { color: #fffef9; background: #526547; border-color: #526547; }
.x2-pair--paper-hover { color: #fffef9; background: #3e5234; border-color: #3e5234; }
.x2-pair--dark-active { color: #344b2c; background: #e4ead8; }
.x2-pair--link-paper { color: #435e36; background: #fffef9; text-decoration: underline; }
.x2-pair--label-canvas { color: #5d6958; background: #f5f3ec; font-size: 10px; letter-spacing: 1px; }
.x2-pair--chip { color: #42533a; background: #eef1e7; }
.x2-pair--count { color: #31553b; background: #d9eddd; }
.x2-pair--due { color: #825322; background: #fff2d8; }
.x2-pair--amber { color: #5c4708; background: #fbf3dc; }
.x2-pair--fail { color: #5b3a12; background: #fbf4e8; }
.x2-pair--red { color: #8f2d22; background: #fffef9; }
.x2-pair--placeholder { color: #6a7565; background: #fff; font-weight: 400; }
.x2-pair--ring { background: #fffef9; outline: 2px solid #526547; outline-offset: 2px; }
.x2-pair--field { background: #fffef9; border-color: #81976b; }
.x2-pair--line { background: #fffef9; border-color: #d9ded0; }
.x2-pair--line2 { background: #fffef9; border-color: #cbd4bf; }
/* ---------- Typography samples ---------- */
.x2-t-brand { font: 700 29px/1 var(--fd-font-sans); letter-spacing: -1px; color: var(--fd-ink); }
.x2-t-page { font: 500 31px/1.18 var(--fd-font-serif); letter-spacing: -.8px; color: var(--fd-ink); }
.x2-t-panel { font: 500 27px/1.25 var(--fd-font-serif); letter-spacing: -.5px; color: var(--fd-ink); }
.x2-t-dialog { font: 500 26px/1.3 var(--fd-font-serif); letter-spacing: -.4px; color: var(--fd-ink); }
.x2-t-home { font: 600 21px/1.25 var(--fd-font-serif); color: var(--fd-ink); }
.x2-t-room { font: 600 19px/1.3 var(--fd-font-room); color: var(--fd-ink); }
.x2-t-card { font: 600 17px/1.3 var(--fd-font-serif); color: var(--fd-ink); }
.x2-t-notice { font: 500 16px/1.4 var(--fd-font-sans); color: var(--fd-ink); }
.x2-t-heading { font: 600 15px/1.45 var(--fd-font-sans); color: var(--fd-ink); }
.x2-t-body { font: 400 14px/1.55 var(--fd-font-sans); color: var(--fd-ink); }
.x2-t-post { font: 400 13.5px/1.55 var(--fd-font-sans); color: var(--fd-ink); }
.x2-t-second { font: 400 13px/1.6 var(--fd-font-sans); color: var(--fd-muted); }
.x2-t-control { font: 500 12px/1.4 var(--fd-font-sans); color: var(--fd-ink); }
.x2-t-meta { font: 400 11.5px/1.5 var(--fd-font-sans); color: var(--fd-muted); }
.x2-t-label { font: 600 10px/1.5 var(--fd-font-sans); letter-spacing: 1px; text-transform: uppercase; color: var(--fd-label); }
.x2-t-metric { font: 500 25px/1.2 var(--fd-font-sans); color: var(--fd-ink); }
.x2-gloss { border-bottom: 1px dotted #7d97ab; cursor: help; }
/* ---------- Space, corners, shadows ---------- */
.x2-space { display: grid; gap: 8px; }
.x2-space-row { display: grid; grid-template-columns: 64px 34px minmax(0, 1fr); align-items: center; gap: 12px; font-size: 13px; color: var(--fd-muted); }
.x2-space-row code { font-size: 12px; color: var(--fd-ink); }
.x2-bar { display: block; height: 16px; border-radius: 2px; background: var(--fd-field-line); }
.x2-w4 { width: 4px; } .x2-w6 { width: 6px; } .x2-w8 { width: 8px; } .x2-w10 { width: 10px; }
.x2-w12 { width: 12px; } .x2-w14 { width: 14px; } .x2-w16 { width: 16px; } .x2-w18 { width: 18px; }
.x2-w20 { width: 20px; } .x2-w22 { width: 22px; } .x2-w24 { width: 24px; } .x2-w28 { width: 28px; }
.x2-w30 { width: 30px; } .x2-w44 { width: 44px; }
.x2-shapes { display: flex; flex-wrap: wrap; gap: 18px; }
.x2-shape { display: grid; justify-items: start; gap: 8px; font-size: 12px; color: var(--fd-muted); }
.x2-shape b { color: var(--fd-ink); font-weight: 600; }
.x2-shape-box { width: 96px; height: 56px; border: 1px solid var(--fd-field-line); background: var(--fd-soft); }
.x2-r2 { border-radius: 2px; } .x2-r3 { border-radius: 3px; } .x2-r4 { border-radius: 4px; } .x2-r5 { border-radius: 5px; }
.x2-r6 { border-radius: 6px; } .x2-r8 { border-radius: 8px; } .x2-r10 { border-radius: 10px; }
.x2-r14 { border-radius: 14px 14px 0 0; } .x2-r999 { border-radius: 999px; }
.x2-shadows { display: flex; flex-wrap: wrap; gap: 26px; padding: 10px 6px 18px; }
.x2-shadow-box { width: 150px; height: 72px; border: 1px solid var(--fd-line); border-radius: 8px; background: var(--fd-paper); }
.x2-sh-card { box-shadow: var(--fd-shadow-card); }
.x2-sh-menu { box-shadow: var(--fd-shadow-menu); border-radius: 6px; }
.x2-sh-room { box-shadow: var(--fd-shadow-room-menu); }
.x2-sh-dialog { box-shadow: var(--fd-shadow-dialog); border-color: var(--fd-line-2); border-radius: 10px; }
.x2-sh-dock { box-shadow: var(--fd-shadow-dock); border-radius: 0; border-width: 1px 0 0; border-color: #cdd5bf; }
.x2-sh-pill { box-shadow: var(--fd-shadow-pill); border: 0; border-radius: 999px; height: 34px; background: var(--fd-green); }
/* ---------- Layout map (1440 x 1000, drawn to scale) ---------- */
.x2-map { position: relative; width: 100%; max-width: 760px; aspect-ratio: 1440 / 1000; overflow: hidden; border: 1px solid var(--fd-line-2); background: var(--fd-bg); font: 500 11px/1.3 var(--fd-font-sans); color: var(--fd-green-dark); }
.x2-map-head { position: absolute; left: 0; right: 0; top: 0; height: 6.4%; display: flex; align-items: center; padding-left: 1.94%; background: var(--fd-paper); border-bottom: 1px solid var(--fd-line); }
.x2-map-rail { position: absolute; left: 1.94%; top: 6.4%; bottom: 0; width: 13.19%; padding: 8px 6px; border-left: 1px dashed var(--fd-field-line); border-right: 1px dashed var(--fd-field-line); background: #efeee5; }
.x2-map-main { position: absolute; left: 17.22%; right: 1.94%; top: 8.8%; bottom: 4%; padding: 8px 10px; border: 1px dashed var(--fd-field-line); background: #fbfaf4; }
.x2-map-title { display: block; height: 4%; }
.x2-map-block { display: block; margin-top: 6px; padding: 6px 8px; border: 1px solid var(--fd-line); border-radius: 4px; background: var(--fd-paper); color: var(--fd-muted); }
.x2-map-block--tabs { background: #e8ebdf; }
/* ---------- App frame: desktop ---------- */
.x2-app { min-width: 960px; background: var(--fd-bg); }
.x2-app--screen { width: 1440px; height: 1000px; min-width: 0; overflow: hidden; }
.x2-app-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 64px; padding: 0 28px; background: var(--fd-paper); border-bottom: 1px solid var(--fd-line); }
.x2 .x2-brand { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; flex: none; color: var(--fd-ink); font: 700 29px/1 var(--fd-font-sans); letter-spacing: -1px; text-decoration: none; white-space: nowrap; }
.x2-brand img { display: block; width: 40px; height: 40px; object-fit: contain; flex: none; }
.x2-brand-word { display: inline-flex; align-items: baseline; }
.x2-brand-fed { color: #000; }
.x2-brand-m8 { color: #3b472c; background: url("/assets/brand-camo.svg") repeat; background-size: 44px 33px; }
@supports (background-clip: text) or (-webkit-background-clip: text) {
.x2-brand-m8 { -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-stroke: .2px #303b25; }
}
.x2-hacts { display: flex; align-items: center; gap: 9px; }
.x2 .x2-hbtn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--fd-line); border-radius: 5px; background: transparent; color: var(--fd-ink); text-decoration: none; }
.x2 .x2-hbtn:hover { background: var(--fd-hover-2); }
.x2-app-body { display: grid; grid-template-columns: 190px minmax(0, 1fr); column-gap: 30px; padding-left: 28px; }
.x2-main { min-width: 0; padding: 24px 28px 40px 0; }
/* Rail */
.x2-rail { padding: 24px 0 18px; }
.x2-rail--alone { width: 190px; padding: 0; }
.x2-rail-label { display: block; margin: 22px 0 9px; padding: 0 10px; font: 600 10px/1.5 var(--fd-font-sans); letter-spacing: 1px; text-transform: uppercase; color: var(--fd-label); }
.x2-rail-label--first { margin-top: 0; }
.x2-rail-mine { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--fd-line); }
.x2-rail-mine .x2-rail-label { margin-top: 0; }
.x2 .x2-rail-link { position: relative; display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; margin: 1px 0; padding: 10px; border: 0; border-radius: 5px; background: transparent; color: var(--fd-muted); font: 400 13px/1.4 var(--fd-font-sans); text-align: left; text-decoration: none; }
.x2 .x2-rail-link:hover, .x2 .x2-rail-link.is-hover { color: var(--fd-green-dark); background: var(--fd-hover); }
.x2 .x2-rail-link.is-current { color: var(--fd-green-dark); font-weight: 600; background: var(--fd-active); }
.x2 .x2-rail-link.is-current::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; border-radius: 2px; background: var(--fd-green); }
.x2-rail-states { display: grid; grid-template-columns: repeat(3, 190px); gap: 18px; }
/* Page head */
.x2-pagehead { min-height: 42px; margin: 0 0 16px; }
.x2-titlerow { display: flex; align-items: center; gap: 9px; }
.x2-page-title { font: 500 31px/1.18 var(--fd-font-serif); letter-spacing: -.8px; color: var(--fd-ink); }
.x2-page-sub { max-width: 70ch; margin-top: 4px; font-size: 13px; color: var(--fd-muted); }
.x2-help { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px; padding: 0; border: 1px solid #cbd3c0; border-radius: 50%; background: transparent; color: #53634a; font: 500 15px/1 var(--fd-font-sans); }
.x2-help:hover { background: #e9eedf; border-color: #9dae8e; }
/* Public scope tabs */
.x2-ptabs { display: flex; align-items: center; gap: 3px; width: 100%; min-height: 48px; margin: 0 0 17px; padding: 3px; overflow: auto; border: 1px solid #d2d9c8; border-radius: 6px; background: #e8ebdf; scrollbar-width: none; }
.x2-ptabs-label { display: inline-flex; align-items: center; padding: 0 8px; color: #43553a; font-size: 10px; letter-spacing: .8px; text-transform: uppercase; white-space: nowrap; }
.x2-ptab { flex: 1 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 44px; padding: 8px 16px; border: 0; border-radius: 4px; background: transparent; color: #42543a; font-size: 13px; font-weight: 400; white-space: nowrap; }
.x2-ptab:hover { background: #dce4d0; }
.x2-ptab[aria-pressed="true"] { color: #fffef9; background: var(--fd-green); }
.x2-ptab small { padding: 2px 5px; border: 1px solid #bdc7b2; border-radius: 2px; font-size: 10px; }
.x2-ptab-short { display: none; }
/* Section tabs (subnav) */
.x2-subnav { display: flex; flex-wrap: wrap; gap: 22px; margin: 0 0 14px; border-bottom: 1px solid var(--fd-line); }
.x2 .x2-subnav-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 8px 0; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: none; color: var(--fd-muted); font-size: 12px; font-weight: 400; text-decoration: none; white-space: nowrap; }
.x2 .x2-subnav-link:hover { color: var(--fd-green-dark); }
.x2 .x2-subnav-link.is-on { border-bottom-color: var(--fd-green); color: var(--fd-green-dark); font-weight: 600; }
.x2 .x2-subnav-more { margin-left: auto; }
.x2-subnav-chip { padding: 1px 4px; border-radius: 3px; background: #eef1e7; color: var(--fd-muted); font-size: 10px; font-weight: 400; }
/* ---------- App frame: phone ---------- */
.x2-phone { display: flex; flex-direction: column; height: 100%; min-height: 560px; overflow: hidden; background: var(--fd-bg); }
.x2-phone-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex: none; height: 59px; padding: 0 13px; background: var(--fd-paper); border-bottom: 1px solid var(--fd-line); }
.x2-phone .x2-brand { gap: 6px; font-size: 22px; letter-spacing: -.8px; }
.x2-phone .x2-brand img { width: 28px; height: 28px; }
.x2-phone .x2-hacts { gap: 4px; }
.x2-phone-main { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 17px 13px 24px; }
.x2-phone-main .x2-page-title { font-size: 28px; line-height: 1.2; }
.x2-phone .x2-ptabs { min-height: 46px; margin-bottom: 12px; }
.x2-phone .x2-ptabs-label, .x2-phone .x2-ptab small, .x2-phone .x2-ptab-full { display: none; }
.x2-phone .x2-ptab-short { display: inline; }
.x2-phone .x2-ptab { flex: 1 1 0; min-width: 0; padding: 8px 5px; font-size: 12px; }
.x2-dock { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 2px; flex: none; min-height: 78px; padding: 7px 4px; background: var(--fd-paper); border-top: 1px solid #cdd5bf; box-shadow: var(--fd-shadow-dock); }
.x2 .x2-dock-link { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; min-width: 0; min-height: 58px; padding: 5px 1px; border-radius: 5px; color: var(--fd-muted); font: 400 11px/1.3 var(--fd-font-sans); text-align: center; text-decoration: none; }
.x2 .x2-dock-link .x2-ic { width: 20px; height: 20px; }
.x2 .x2-dock-link.is-current { color: var(--fd-green-dark); background: #e5ebd9; font-weight: 600; }
.x2-dock--alone { max-width: 375px; border: 1px solid #cdd5bf; }
/* ---------- Buttons and fields ---------- */
.x2-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 8px 13px; border: 1px solid var(--fd-line-2); border-radius: 5px; background: var(--fd-paper); color: var(--fd-green-dark); font: 500 12px/1.4 var(--fd-font-sans); text-decoration: none; white-space: nowrap; }
.x2-btn--primary { border-color: var(--fd-green); background: var(--fd-green); color: #fffef9; }
.x2-btn--primary:hover, .x2-btn--primary.is-hover { border-color: var(--fd-olive-hover); background: var(--fd-olive-hover); }
.x2-btn--ghost:hover, .x2-btn--ghost.is-hover { border-color: #aebf9c; background: var(--fd-hover-2); color: var(--fd-green-dark); }
.x2-btn--danger { border-color: #d9b2a9; background: #fff5f1; color: #9a302d; }
.x2-btn:disabled { opacity: .55; cursor: not-allowed; }
.x2 .x2-link { color: var(--fd-link); font-weight: 500; text-decoration: underline; text-underline-offset: 2px; }
.x2 .x2-link--strong { color: var(--fd-green-dark); font-weight: 600; text-decoration-thickness: 1px; }
.x2-field { display: grid; gap: 6px; min-width: 0; }
.x2-label { font: 600 12px/1.4 var(--fd-font-sans); color: var(--fd-ink); }
.x2-hint { font-size: 12px; color: var(--fd-muted); }
.x2-input, .x2-select, .x2-textarea { width: 100%; min-height: 44px; padding: 8px 10px; border: 1px solid var(--fd-field-line); border-radius: 5px; background: var(--fd-paper); color: var(--fd-ink); font: 400 13px/1.45 var(--fd-font-sans); }
.x2-textarea { min-height: 88px; resize: vertical; }
.x2-input::placeholder, .x2-textarea::placeholder { color: var(--fd-placeholder); opacity: 1; }
.x2-select { appearance: auto; }
.x2-input[aria-invalid="true"] { border: 2px solid var(--fd-ink); padding: 7px 9px; }
.x2-input:disabled { border-color: var(--fd-line-2); background: #f1f2ee; color: #7d8778; cursor: not-allowed; }
.x2-check { display: flex; align-items: flex-start; gap: 8px; font-size: 12.5px; line-height: 1.5; color: var(--fd-ink); }
.x2-check input { flex: none; width: 20px; height: 20px; margin-top: 0; accent-color: var(--fd-green); }
.x2-controls-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 22px; max-width: 720px; }
.x2-focusdemo { display: flex; flex-wrap: wrap; gap: 22px; align-items: center; padding: 6px; }
/* ---------- Chips and badges ---------- */
.x2-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 7px; border: 1px solid var(--fd-line); border-radius: 4px; background: #eef1e7; color: #42533a; font-size: 11px; font-weight: 400; line-height: 1.4; white-space: nowrap; }
.x2-chip--due { border-color: var(--fd-due-line); background: var(--fd-due-bg); color: var(--fd-due-ink); }
.x2-count { display: inline-flex; align-items: center; padding: 1px 9px; border: 1px solid var(--fd-count-line); border-radius: 999px; background: var(--fd-mint); color: var(--fd-count-ink); font-size: 12px; font-weight: 600; white-space: nowrap; }
.x2-count--lg { min-height: 44px; padding: 4px 9px; font-size: 13px; }
.x2-kind { display: inline-flex; align-items: center; min-height: 22px; padding: 2px 9px; border: 1px solid var(--fd-line); border-radius: 999px; background: var(--fd-soft); color: var(--fd-green-dark); font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.x2-kind--grant { background: #e9f4ea; }
.x2-kind--code { background: #f6efdc; }
.x2 .x2-talk { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 4px 12px; border: 1px solid var(--fd-green); border-radius: 999px; background: transparent; color: var(--fd-green-dark); font-size: 13px; font-weight: 600; line-height: 1.2; text-decoration: none; white-space: nowrap; }
.x2 .x2-talk:hover { background: #eef2e6; }
.x2 .x2-talk--primary { background: var(--fd-green); color: #fffef9; }
.x2 .x2-talk--primary:hover { background: var(--fd-green-dark); }
.x2-talk svg { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linejoin: round; }
.x2-talk-in { font-size: 12.5px; color: var(--fd-muted); }
.x2-tag { display: inline-block; padding: 2px 9px; border: 1px solid #c3d0b2; border-radius: 999px; background: #e5ecdb; color: var(--fd-green-dark); font-size: 11.5px; font-weight: 700; line-height: 1.5; white-space: nowrap; }
.x2-new { display: inline-flex; align-items: center; padding: 0 7px; border: 1px solid var(--fd-line-2); border-radius: 999px; background: #e6ecdd; color: var(--fd-green-dark); font-size: 11px; font-weight: 600; line-height: 1.6; white-space: nowrap; }
.x2-pin { padding: 1px 7px; border-radius: 999px; background: var(--fd-ai-mark); color: var(--fd-amber-ink); font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.x2-you { padding: 1px 6px; border: 1px solid var(--fd-line); border-radius: 999px; color: var(--fd-muted); font-size: 11.5px; }
.x2-crew { display: inline-flex; align-items: center; padding: 1px 8px; border: 1px solid var(--fd-green); border-radius: 999px; background: #eef2e6; color: var(--fd-green-dark); font-size: 11.5px; font-weight: 650; line-height: 1.5; white-space: nowrap; }
.x2-answered { display: inline-flex; align-items: center; gap: 3px; padding: 1px 8px; border: 1px solid #b9d4b3; border-radius: 999px; background: #e6f1e3; color: var(--fd-answered); font-size: 11.5px; font-weight: 650; line-height: 1.6; white-space: nowrap; }
.x2-waiting { display: inline-flex; padding: 1px 8px; border-radius: 999px; background: var(--fd-amber); color: var(--fd-amber-ink); font-size: 11.5px; font-weight: 650; white-space: nowrap; }
.x2-sam { display: inline-flex; align-items: center; padding: 1px 8px; border-radius: 999px; background: #e3f0e3; color: #22502a; font-size: 11.5px; font-weight: 650; white-space: nowrap; }
.x2-hostchip { display: inline-flex; align-items: center; min-height: 20px; padding: 1px 8px; border-radius: 4px; background: var(--fd-green-dark); color: #fffef9; font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.x2-chiprow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.x2-chipcell { display: grid; justify-items: start; gap: 6px; min-width: 150px; font-size: 12px; color: var(--fd-muted); }
/* ---------- Cards and panels ---------- */
.x2-panel { padding: 18px 20px; border: 1px solid var(--fd-line); border-radius: 8px; background: var(--fd-paper); box-shadow: var(--fd-shadow-card); }
.x2-panel-h { font: 600 15px/1.45 var(--fd-font-sans); color: var(--fd-ink); }
.x2-panel-p { margin-top: 4px; font-size: 13px; line-height: 1.6; color: var(--fd-muted); }
.x2-cards { display: grid; gap: 10px; }
.x2-card { position: relative; min-width: 0; padding: 14px; border: 1px solid var(--fd-line); border-radius: 8px; background: var(--fd-paper); box-shadow: var(--fd-shadow-card); }
.x2-card.is-selected { border-color: var(--fd-selected-line); box-shadow: inset 2px 0 var(--fd-selected-bar); }
.x2-card-top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 7px; }
.x2-card-title { font: 500 16px/1.4 var(--fd-font-sans); color: var(--fd-ink); }
.x2-card-org { margin-top: 3px; font-size: 12px; color: var(--fd-muted); }
.x2-card-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 10px; font-size: 12px; color: var(--fd-muted); }
.x2-matchpct { font-weight: 700; color: var(--fd-count-ink); }
.x2-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.x2-metric { padding: 14px 16px; border: 1px solid var(--fd-line); border-radius: 8px; background: var(--fd-paper); }
.x2-metric-lbl { font: 600 10px/1.5 var(--fd-font-sans); letter-spacing: .7px; text-transform: uppercase; color: var(--fd-muted); }
.x2-metric-val { margin-top: 2px; font: 500 25px/1.2 var(--fd-font-sans); color: var(--fd-ink); }
.x2-metric-note { margin-top: 2px; font-size: 12px; color: var(--fd-muted); }
.x2-callout { padding: 12px; border: 1px solid var(--fd-callout-line); border-radius: 6px; background: var(--fd-callout); color: var(--fd-ink); font-size: 13px; font-weight: 500; }
.x2-lede { padding: 11px 13px; border-left: 2px solid var(--fd-selected-bar); border-radius: 0 4px 4px 0; background: var(--fd-soft); font-size: 13px; color: var(--fd-ink); }
.x2-kicker { font: 600 10px/1.5 var(--fd-font-sans); letter-spacing: .7px; text-transform: uppercase; color: var(--fd-green); }
.x2-scrim { display: grid; place-items: center; padding: 34px 16px; border-radius: 6px; background: var(--fd-scrim); }
.x2-dialog { width: min(520px, 100%); padding: 24px; border: 1px solid var(--fd-line-2); border-radius: 10px; background: var(--fd-paper); color: var(--fd-ink); box-shadow: var(--fd-shadow-dialog); line-height: 1.65; }
.x2-dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.x2-dialog-title { font: 500 26px/1.3 var(--fd-font-serif); letter-spacing: -.4px; }
.x2-dialog-close { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; border: 1px solid var(--fd-line); border-radius: 5px; background: transparent; color: var(--fd-ink); font-size: 23px; line-height: 1; }
.x2-dialog p { margin: 10px 0; font-size: 13px; color: var(--fd-muted); }
.x2-dialog-foot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 16px; }
/* ---------- Chat home ---------- */
.x2-ch { display: grid; grid-template-columns: minmax(190px, 220px) minmax(0, 1fr) minmax(240px, 290px); grid-template-areas: "rooms ask rail" "rooms stream rail"; grid-template-rows: auto 1fr; gap: 16px 20px; align-items: start; max-width: 1180px; }
.x2-ch > .x2-ch-rooms { grid-area: rooms; }
.x2-ch > .x2-ch-ask { grid-area: ask; }
.x2-ch > .x2-ch-stream { grid-area: stream; }
.x2-ch > .x2-ch-rail { grid-area: rail; }
.x2-ch-rooms { padding: 14px 10px 12px; border: 1px solid var(--fd-line); border-radius: 8px; background: var(--fd-paper); }
.x2-ch-ask { padding: 16px 18px; border: 1px solid var(--fd-line); border-radius: 8px; background: var(--fd-paper); }
.x2-ch-stream { display: grid; gap: 10px; }
.x2-ch-rail { display: grid; gap: 8px; }
.x2-ch-kicker { margin-bottom: 8px; padding: 0 6px; font: 600 10px/1.5 var(--fd-font-sans); letter-spacing: 1px; text-transform: uppercase; color: var(--fd-label); }
.x2-ch-group { margin: 10px 0 4px; padding: 0 6px; font: 500 11.5px/1.4 var(--fd-font-sans); color: var(--fd-muted); }
.x2-ch-list li { margin: 1px 0; }
.x2-ch-room { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-height: 38px; padding: 7px 8px; border: 0; border-radius: 5px; background: transparent; color: var(--fd-ink); font: 400 13px/1.35 var(--fd-font-sans); text-align: left; }
.x2 a.x2-ch-room { color: var(--fd-ink); text-decoration: none; }
.x2-ch-room:hover { background: #edf1e6; }
.x2-ch-room.is-current { background: var(--fd-active); color: var(--fd-green-dark); font-weight: 600; box-shadow: inset 3px 0 var(--fd-green); }
.x2-ch-room-label { display: -webkit-box; min-width: 0; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.x2-ch-dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--fd-green); }
.x2-ch-room.x2-ch-messages { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--fd-line); border-radius: 0 0 5px 5px; font-weight: 600; }
.x2-ch-note { margin: 10px 6px 0; font-size: 12.5px; line-height: 1.45; color: var(--fd-muted); }
.x2-ch-h2 { font: 600 21px/1.25 var(--fd-font-serif); color: var(--fd-ink); }
.x2-ch-form { display: grid; gap: 8px; margin-top: 10px; }
.x2-ch-rules { font-size: 12px; line-height: 1.5; color: var(--fd-muted); }
.x2-ch-input { width: 100%; min-height: 72px; padding: 10px 12px; border: 1px solid #b9c4ab; border-radius: 6px; background: #fff; color: var(--fd-ink); font: 400 14px/1.5 var(--fd-font-sans); resize: vertical; }
.x2-ch-input::placeholder { color: var(--fd-placeholder); opacity: 1; }
.x2-ch-dest { font-size: 13px; color: var(--fd-muted); }
.x2-ch-desttext { color: var(--fd-ink); }
.x2-ch-cap { font-size: 12.5px; line-height: 1.45; color: var(--fd-muted); }
.x2-ch-linkbtn { min-height: 32px; padding: 6px 2px; border: 0; background: none; color: var(--fd-green-dark); font: 600 13px/1.3 var(--fd-font-sans); text-decoration: underline; text-underline-offset: 2px; }
.x2-ch-check { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; line-height: 1.45; color: var(--fd-ink); }
.x2-ch-check input { flex: none; width: 18px; height: 18px; margin-top: 1px; accent-color: var(--fd-green); }
.x2-ch-actions { display: flex; justify-content: flex-end; gap: 8px; }
.x2 .x2-ch-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 8px 14px; border: 1px solid #b9c4ab; border-radius: 5px; background: var(--fd-paper); color: var(--fd-green-dark); font: 600 13px/1.2 var(--fd-font-sans); text-decoration: none; white-space: nowrap; }
.x2 .x2-ch-btn--primary { border-color: var(--fd-green); background: var(--fd-green); color: #fffef9; }
.x2-ch-streamhead { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.x2-ch-streamhead .x2-ch-h2 { font-size: 18px; }
.x2-ch-post { display: flex; gap: 12px; padding: 13px 15px; border: 1px solid var(--fd-line); border-radius: 8px; background: var(--fd-paper); }
.x2-ch-avatar { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 34px; width: 34px; height: 34px; border-radius: 50%; background: #dfe7d3; color: var(--fd-green-dark); font: 700 12px/1 var(--fd-font-sans); }
.x2-ch-main { display: grid; gap: 3px; min-width: 0; }
.x2-ch-posthead { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.x2-ch-name { min-height: 28px; padding: 0; border: 0; background: none; color: var(--fd-ink); font: 600 13.5px/1.35 var(--fd-font-sans); text-align: left; text-decoration: underline; text-decoration-color: #b9c4ab; text-underline-offset: 2px; }
.x2-ch-meta { font-size: 12px; color: var(--fd-muted); }
.x2-ch-ptitle { font: 600 14px/1.4 var(--fd-font-sans); color: var(--fd-ink); }
.x2-ch-body { display: -webkit-box; overflow: hidden; font-size: 14px; line-height: 1.5; color: var(--fd-ink); -webkit-line-clamp: 5; -webkit-box-orient: vertical; }
.x2-ch-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin-top: 4px; font-size: 12.5px; color: var(--fd-muted); }
.x2 .x2-ch-link { color: var(--fd-green-dark); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.x2-ch-foot .x2-ch-link { display: inline-flex; align-items: center; min-height: 32px; }
.x2-ch-unans { display: grid; gap: 6px; padding: 13px 15px; border: 1px solid #e3d6ae; border-radius: 8px; background: #f7f0dc; }
.x2-ch-unans-title { font: 600 14px/1.3 var(--fd-font-sans); color: #5a4a17; }
.x2-ch-unans-body { display: -webkit-box; overflow: hidden; font-size: 14px; line-height: 1.5; color: var(--fd-ink); -webkit-line-clamp: 4; -webkit-box-orient: vertical; }
.x2-ch-unans-meta { font-size: 12.5px; color: #5d5532; }
.x2-ch-unans-note { font-size: 12.5px; color: #5d5532; }
.x2-ch-unans-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 4px; }
.x2-ch-card { display: grid; gap: 8px; padding: 15px 16px; border: 1px solid var(--fd-line); border-radius: 8px; background: var(--fd-paper); }
.x2-ch-card .x2-ch-kicker { padding: 0; color: #6b5a1f; }
.x2-ch-cardtitle { font: 600 17px/1.3 var(--fd-font-serif); color: var(--fd-ink); }
.x2-ch-cardmeta { font-size: 12.5px; color: var(--fd-muted); }
.x2-ch-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.x2-ch-pill { display: inline-flex; align-items: center; padding: 2px 9px; border: 1px solid var(--fd-line-2); border-radius: 999px; background: #f3f5ee; color: var(--fd-green-dark); font-size: 11.5px; font-weight: 600; }
.x2-ch-pill--due { border-color: #e3d6ae; background: #fbf3df; color: #5a4a17; }
.x2-ch-cardnote { font-size: 12.5px; line-height: 1.5; color: var(--fd-muted); }
.x2-ch-cardacts { display: flex; flex-wrap: wrap; gap: 8px; }
.x2-ch-railfoot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 2px; font-size: 12.5px; color: var(--fd-muted); }
.x2-photo { margin-bottom: 4px; padding: 5px; border: 1px solid var(--fd-line); border-radius: 8px; background: var(--fd-paper); }
.x2-photo-box { display: grid; place-items: center; height: 118px; border: 1px dashed var(--fd-line-2); border-radius: 4px; background: var(--fd-soft); color: var(--fd-muted); font-size: 12px; line-height: 1.4; text-align: center; }
/* ---------- One room ---------- */
.x2-room { min-width: 0; font-size: 14px; line-height: 1.55; overflow-wrap: anywhere; }
.x2-room--sample { max-width: 760px; }
.x2-room-top { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 10px 16px; margin-bottom: 10px; }
.x2-room-top > :first-child { flex: 1 1 240px; min-width: 0; margin-bottom: 0; }
.x2-followwrap { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; max-width: 100%; text-align: right; }
.x2-follow-hint { color: var(--fd-muted); font-size: 12.5px; line-height: 1.4; }
.x2-room-head { display: grid; gap: 4px; margin-bottom: 10px; justify-items: start; }
.x2-room-title { font: 600 19px/1.3 var(--fd-font-room); color: var(--fd-ink); }
.x2-room-sub { font-size: 12.5px; color: var(--fd-muted); }
.x2-room-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0 10px; padding-bottom: 8px; border-bottom: 1px solid var(--fd-line); }
.x2-room-tab { min-height: 36px; padding: 6px 12px; border: 1px solid transparent; border-radius: 6px; background: none; color: var(--fd-muted); font-size: 13px; }
.x2-room-tab:hover { color: var(--fd-green-dark); }
.x2-room-tab[aria-pressed="true"] { border-color: var(--fd-line); background: var(--fd-soft); color: var(--fd-green-dark); font-weight: 600; }
.x2-room-body { display: grid; gap: 10px; min-width: 0; }
.x2-post { position: relative; min-width: 0; padding: 12px; border: 1px solid var(--fd-line); border-radius: 6px; background: var(--fd-paper); }
.x2-post--mine { background: #fbfcf6; }
.x2-post--held { border-style: dashed; }
.x2-post--ai { border-color: var(--fd-ai-line); background: var(--fd-ai-bg); }
.x2-post--accepted { border-color: #a9c9a2; background: #f2f8ef; }
.x2-author { display: flex; align-items: flex-start; gap: 9px; margin-bottom: 6px; min-width: 0; }
.x2-avatar { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 30px; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; background: var(--fd-soft); color: var(--fd-green-dark); font: 600 11px/1 var(--fd-font-sans); }
.x2-avatar--ai { background: var(--fd-ai-mark); color: var(--fd-amber-ink); }
.x2-who { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; }
.x2-name { min-height: 24px; padding: 0; border: 0; background: none; color: var(--fd-green-dark); font: 600 13px/1.4 var(--fd-font-sans); text-align: left; }
button.x2-name:hover { text-decoration: underline; }
.x2-meta, .x2-time { color: var(--fd-muted); font-size: 11.5px; }
.x2-text { font-size: 13.5px; white-space: pre-line; color: var(--fd-ink); }
.x2-subject { font-size: 13.5px; font-weight: 600; }
.x2-posttag { margin-bottom: 6px; }
.x2-heldnote { margin-bottom: 4px; color: var(--fd-muted); font-size: 12px; }
.x2-acts { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 6px; }
.x2-act { display: inline-flex; align-items: center; gap: 5px; min-height: 32px; padding: 4px 8px; border: 1px solid transparent; border-radius: 6px; background: none; color: var(--fd-green-dark); font-size: 12.5px; }
.x2-act:hover { background: var(--fd-soft); }
.x2-act--helpful[aria-pressed="true"] { border-color: #c9d4bb; background: #e8eedf; font-weight: 600; }
.x2-act--check { padding: 4px 10px; border-color: var(--fd-line); background: var(--fd-paper); font-weight: 600; }
.x2-act.x2-act--count { padding: 4px 0; color: var(--fd-muted); font-size: 12px; cursor: default; }
.x2-act.x2-act--count:hover { background: none; }
.x2-act--more { min-width: 36px; justify-content: center; font-size: 16px; letter-spacing: 1px; }
.x2-act--more[aria-expanded="true"] { background: var(--fd-soft); }
.x2-follow { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 4px 10px; border: 1px solid var(--fd-line); border-radius: 999px; background: var(--fd-paper); color: var(--fd-green-dark); font-size: 12.5px; font-weight: 600; }
.x2-follow[aria-pressed="true"] { border-color: var(--fd-green); background: var(--fd-soft); }
.x2-follow svg { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.x2-follow--big { min-height: 36px; padding: 6px 12px; border-color: var(--fd-green); font-size: 13px; }
.x2-menuwrap { position: relative; display: inline-flex; }
.x2-menu { position: absolute; top: calc(100% + 4px); left: 0; z-index: 3; display: grid; min-width: 200px; max-width: 260px; padding: 6px; border: 1px solid var(--fd-line); border-radius: 8px; background: var(--fd-paper); box-shadow: var(--fd-shadow-room-menu); }
.x2-menu--static { position: static; max-width: 240px; }
.x2-menu-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 40px; padding: 8px 12px; border: 0; border-radius: 5px; background: none; color: var(--fd-ink); font-size: 13.5px; text-align: left; }
.x2-menu-item:hover { background: var(--fd-soft); }
.x2-menu-item--danger { color: var(--fd-red); }
.x2-menu-hint { color: var(--fd-muted); font-size: 11.5px; }
.x2-menu-foot { margin-top: 4px; padding: 8px 12px 4px; border-top: 1px solid var(--fd-line); font-size: 12.5px; }
.x2 .x2-menu-link { color: var(--fd-green-dark); font-weight: 600; }
.x2-branch { display: grid; gap: 8px; margin: 10px 0 0 6px; padding-left: 12px; border-left: 2px solid var(--fd-line); }
.x2-branch > summary { min-height: 32px; padding: 6px 0; color: var(--fd-green-dark); font-size: 12.5px; cursor: pointer; }
.x2-branch .x2-post { padding: 10px; background: #fdfdf8; }
.x2-newpill-row { display: flex; justify-content: center; }
.x2-newpill { display: inline-flex; align-items: center; min-height: 34px; padding: 6px 16px; border: 0; border-radius: 999px; background: var(--fd-green); color: #fff; font-size: 13px; font-weight: 600; box-shadow: var(--fd-shadow-pill); }
.x2-followed { padding: 6px 10px; border-left: 3px solid var(--fd-green); background: #f4f6ee; color: var(--fd-muted); font-size: 12.5px; }
.x2-accepted-line { display: flex; align-items: center; gap: 4px; margin: 6px 0 2px; color: var(--fd-answered); font-size: 12.5px; font-weight: 600; }
.x2-composehost { display: grid; gap: 6px; margin-top: 12px; }
.x2-composehost > .x2-compose { margin-top: 0; }
.x2-compose { display: grid; gap: 8px; margin-top: 12px; padding: 12px; border: 1px solid var(--fd-line); border-radius: 6px; background: var(--fd-paper); }
.x2-compose--reply { margin-top: 8px; background: #fdfdf8; }
.x2-rules { font-size: 12.5px; line-height: 1.5; color: var(--fd-muted); }
.x2-clabel { display: grid; gap: 6px; color: var(--fd-muted); font-size: 12px; }
.x2-cinput { width: 100%; min-height: 72px; padding: 9px 10px; border: 1px solid #c9d1bd; border-radius: 6px; background: #fff; color: var(--fd-ink); font: 400 15px/1.5 var(--fd-font-sans); resize: vertical; }
.x2-cinput::placeholder { color: var(--fd-placeholder); opacity: 1; }
.x2-notsent { color: var(--fd-muted); font-size: 12px; font-style: italic; }
.x2-cap { font-size: 12px; color: var(--fd-ink); }
.x2-crow { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
.x2-dest { margin-right: auto; color: var(--fd-muted); font-size: 12px; }
.x2-rbtn { display: inline-flex; align-items: center; justify-content: center; min-height: 36px; padding: 6px 14px; border: 1px solid var(--fd-line); border-radius: 6px; background: var(--fd-paper); color: var(--fd-green-dark); font-size: 13px; font-weight: 600; }
.x2-rbtn--primary { border-color: var(--fd-green); background: var(--fd-green); color: #fff; }
.x2-rbtn--primary:hover { background: var(--fd-green-dark); }
.x2-rbtn--ghost { background: none; }
.x2-rbtn--danger { border-color: var(--fd-red); background: var(--fd-red); color: #fff; }
.x2-rbtn:disabled { opacity: .6; cursor: default; }
.x2-looking { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.x2-looking-label { margin-right: 2px; color: var(--fd-muted); font-size: 12.5px; }
.x2-lchip { display: inline-flex; align-items: center; min-height: 32px; padding: 4px 11px; border: 1px solid var(--fd-line); border-radius: 999px; background: var(--fd-paper); color: var(--fd-green-dark); font-size: 12.5px; }
.x2-lchip:hover { background: var(--fd-soft); }
.x2-lchip[aria-pressed="true"] { border-color: var(--fd-green); background: #e5ecdb; font-weight: 600; box-shadow: inset 0 0 0 1px var(--fd-green); }
.x2-act--interest { padding: 4px 10px; border-color: var(--fd-line); border-radius: 999px; }
.x2-act--interest[aria-pressed="true"] { border-color: #c3d0b2; background: #e5ecdb; font-weight: 600; }
.x2-rolesonly { color: var(--fd-muted); font-size: 12px; }
.x2-host { min-width: 0; padding: 12px 14px; border: 1px solid var(--fd-line); border-left: 3px solid var(--fd-green); border-radius: 6px; background: var(--fd-paper); line-height: 1.5; }
.x2-host-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-bottom: 6px; font-size: 12px; color: var(--fd-muted); }
.x2-host-body { color: var(--fd-ink); }
.x2-host-lead { font-size: 15.5px; font-weight: 650; line-height: 1.4; color: var(--fd-ink); }
.x2-host-links { display: grid; margin-top: 8px; }
.x2-host-links li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; padding: 7px 0; border-top: 1px solid var(--fd-line); font-size: 13.5px; }
.x2-host-links li:first-child { border-top: 0; }
.x2 .x2-host-links a { color: var(--fd-green-dark); font-weight: 600; }
.x2-host-meta { display: inline-flex; padding: 1px 8px; border-radius: 999px; background: #f6efdc; color: var(--fd-amber-ink); font-size: 11.5px; font-weight: 650; white-space: nowrap; }
.x2-host-meta--grant { background: #e9f4ea; color: var(--fd-green-dark); }
.x2-host-rest { color: var(--fd-muted); font-size: 12.5px; }
.x2-host-note { margin-top: 8px; padding-top: 6px; border-top: 1px solid var(--fd-line); font-size: 12px; color: var(--fd-muted); }
.x2-catchup { padding: 8px 10px; border: 1px solid var(--fd-line); border-radius: 6px; background: var(--fd-bg); font-size: 13.5px; }
.x2-catchup-meta { margin-top: 2px; color: var(--fd-muted); font-size: 12px; }
.x2-roomparts { align-items: start; }
/* Who's here and People to say hi to */
.x2-here { display: grid; gap: 10px; min-width: 0; padding: 12px 14px; border: 1px solid var(--fd-line); border-radius: 8px; background: var(--fd-paper); }
.x2-here-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; }
.x2-here-line { font-size: 13.5px; color: var(--fd-ink); }
.x2-here-count { font-weight: 700; }
.x2-here-gap { display: inline-block; padding: 0 8px; border: 1px solid #c3d0b2; border-radius: 999px; background: #e5ecdb; color: var(--fd-green-dark); font-size: 12px; font-weight: 600; }
.x2-here-split { color: var(--fd-muted); }
.x2-here-matched { color: var(--fd-muted); font-style: italic; }
.x2-here-online::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 5px; border-radius: 50%; background: var(--fd-online); vertical-align: 1px; }
.x2-dot { color: var(--fd-muted); }
.x2-join { display: inline-flex; flex-wrap: wrap; align-items: stretch; overflow: hidden; border: 1px solid var(--fd-line); border-radius: 8px; background: var(--fd-paper); }
.x2-join-label { display: inline-flex; align-items: center; padding: 0 10px; border-right: 1px solid var(--fd-line); color: var(--fd-muted); font-size: 12.5px; }
.x2-seg { min-height: 36px; padding: 6px 12px; border: 0; border-right: 1px solid var(--fd-line); background: none; color: var(--fd-green-dark); font-size: 13px; font-weight: 600; }
.x2-seg:last-child { border-right: 0; }
.x2-seg:hover { background: var(--fd-soft); }
.x2-seg[aria-pressed="true"] { background: var(--fd-green); color: #fff; }
.x2-hi { display: grid; gap: 8px; }
.x2-hi-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.x2-hi-title { font: 600 16px/1.3 var(--fd-font-room); color: var(--fd-ink); }
.x2-hi-hide, .x2-hi-why { min-height: 32px; padding: 0 2px; border: 0; background: none; color: var(--fd-green-dark); font-size: 12.5px; text-decoration: underline; }
.x2-hi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px; }
.x2-hi-card { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 10px; border: 1px solid var(--fd-line); border-radius: 6px; background: #fdfdf8; }
.x2-hi-who { display: flex; align-items: center; gap: 8px; min-width: 0; }
.x2-hi-name { display: flex; flex-direction: column; min-width: 0; font-size: 11.5px; color: var(--fd-muted); }
.x2-hi-name strong { color: var(--fd-ink); font-size: 13.5px; }
.x2-pavatar { position: relative; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 32px; width: 32px; height: 32px; border-radius: 50%; background: var(--fd-soft); color: var(--fd-green-dark); font: 600 11px/1 var(--fd-font-sans); }
.x2-pavatar.is-on::after { content: ""; position: absolute; right: -1px; bottom: -1px; width: 9px; height: 9px; border: 2px solid #fffef9; border-radius: 50%; background: var(--fd-online); }
.x2-reason { font-size: 12.5px; line-height: 1.45; color: var(--fd-ink); }
.x2-online { color: var(--fd-online); font-size: 11.5px; font-weight: 600; }
.x2-hi-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: auto; }
.x2 .x2-hibtn { display: inline-flex; align-items: center; justify-content: center; min-height: 36px; padding: 6px 14px; border: 1px solid var(--fd-green); border-radius: 6px; background: var(--fd-green); color: #fff; font-size: 13px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.x2 .x2-hibtn:hover { border-color: var(--fd-green-dark); background: var(--fd-green-dark); }
.x2-consent { font-size: 11.5px; color: var(--fd-muted); }
.x2-hi-compact { display: flex; flex-wrap: wrap; align-items: center; gap: 0 4px; font-size: 13.5px; color: var(--fd-ink); }
.x2-hi-compact-label { margin-right: 2px; font-weight: 700; }
.x2 a.x2-hi-compact-name { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; color: var(--fd-green-dark); font-weight: 600; text-decoration: underline; }
.x2-hi-compact .x2-hi-why { margin-left: auto; }
.x2-hi-compact :is(.x2-hi-why, .x2-hi-hide) { min-height: 44px; }
/* Before your first post */
.x2-fp { display: flex; flex-direction: column; gap: 10px; max-width: 560px; padding: 14px 16px; border: 1px solid var(--fd-line-2); border-radius: 8px; background: #f6f8f1; color: var(--fd-ink); font: 400 14px/1.45 var(--fd-font-sans); }
.x2-fp-title { font: 600 17px/1.3 var(--fd-font-serif); }
.x2-fp-line { font-size: 13px; color: var(--fd-muted); }
.x2-fp-legend { margin: 0 0 6px; font: 600 13px/1.4 var(--fd-font-sans); }
.x2-fp-seg { display: flex; flex-wrap: wrap; gap: 6px; }
.x2-fp-segbtn { min-height: 38px; padding: 6px 14px; border: 1px solid #b9c4ab; border-radius: 999px; background: #fff; color: var(--fd-ink); font: 500 13px/1.2 var(--fd-font-sans); }
.x2-fp-segbtn[aria-pressed="true"] { border-color: var(--fd-green); background: var(--fd-active); color: var(--fd-green-dark); font-weight: 600; }
.x2-fp-segbtn:disabled { border-style: dashed; background: #f1f2ee; color: #7d8778; cursor: not-allowed; }
.x2-fp-note { margin-top: 6px; font-size: 12.5px; color: var(--fd-muted); }
.x2-fp-label { display: flex; flex-direction: column; gap: 4px; font: 600 13px/1.4 var(--fd-font-sans); }
.x2-fp-input { width: 100%; max-width: 420px; min-height: 40px; padding: 8px 10px; border: 1px solid #b9c4ab; border-radius: 5px; background: #fff; color: var(--fd-ink); font: 400 14px/1.4 var(--fd-font-sans); }
.x2-fp-preview { margin-top: -4px; font-size: 13px; font-weight: 600; color: var(--fd-green-dark); }
.x2-fp-check { display: flex; align-items: center; gap: 8px; min-height: 38px; font-size: 13.5px; }
.x2-fp-check input { flex: none; width: 18px; height: 18px; accent-color: var(--fd-green); }
.x2-fp-field { min-width: 0; margin: 0; padding: 0; border: 0; }
.x2-fp-codes { display: flex; flex-wrap: wrap; gap: 6px; }
.x2-fp-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 5px 12px; border: 1px solid var(--fd-line-2); border-radius: 999px; background: #fff; font-size: 13px; }
.x2-fp-chip input { flex: none; width: 18px; height: 18px; margin: 0; accent-color: var(--fd-green); }
.x2-fp-input.x2-fp-code { max-width: 140px; }
.x2-fp-label-inline { margin-top: 8px; }
.x2-fp-status { padding: 8px 10px; border: 1px solid #d9d2b6; border-radius: 6px; background: #fbf7ea; font-size: 13px; }
/* Talk doors */
.x2-doors { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
.x2-social { display: grid; gap: 7px; margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--fd-line); }
.x2-quote { overflow: hidden; color: var(--fd-muted); font-size: 12.5px; text-overflow: ellipsis; white-space: nowrap; }
.x2-quote b { color: var(--fd-ink); font-weight: 600; }
.x2-gd { grid-column: 1 / -1; }
.x2-gd-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; padding: 2px 0; }
.x2-gd-talk, .x2-gd-ghost { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-height: 44px; padding: 0 16px; border-radius: 6px; font: 600 14px/1.2 var(--fd-font-sans); white-space: nowrap; }
.x2-gd-talk { border: 1px solid var(--fd-green); background: var(--fd-green); color: #fffef9; }
.x2-gd-talk:hover { border-color: var(--fd-green-dark); background: var(--fd-green-dark); }
.x2-gd-ghost { border: 1px solid var(--fd-field-line); background: var(--fd-paper); color: var(--fd-green-dark); }
.x2-gd-ghost:hover { background: #eef2e6; }
.x2-gd-n { font-variant-numeric: tabular-nums; }
.x2-gd-phone { grid-column: 1 / -1; max-width: 375px; }
.x2-gd-actions--phone { flex-wrap: nowrap; margin: 0; padding: 8px 13px; border: 1px solid var(--fd-line); border-bottom-color: #dfe5d4; background: var(--fd-paper); }
.x2-gd-actions--phone .x2-gd-talk { flex: 1 1 auto; }
/* Phone chat shell */
.x2-pc-head { display: flex; align-items: center; gap: 6px; flex: none; padding: 4px 15px; border-bottom: 1px solid var(--fd-line); background: var(--fd-paper); }
.x2 a.x2-pc-back { display: inline-flex; align-items: center; justify-content: center; flex: none; min-width: 44px; min-height: 44px; color: var(--fd-green-dark); font-size: 22px; line-height: 1; text-decoration: none; }
.x2-pc-title { flex: 1 1 auto; min-width: 0; overflow: hidden; color: var(--fd-ink); font: 650 15px/1.3 var(--fd-font-sans); text-overflow: ellipsis; white-space: nowrap; }
.x2-pc-info { display: inline-flex; align-items: center; justify-content: center; flex: none; min-width: 44px; min-height: 44px; padding: 0; border: 1px solid var(--fd-line); border-radius: 50%; background: var(--fd-paper); color: var(--fd-green-dark); font: 700 17px/1 Georgia, serif; }
.x2-pc-main { flex: 1 1 auto; min-height: 0; overflow: auto; display: grid; align-content: start; gap: 10px; padding: 12px 13px 16px; }
.x2-pc-compose { flex: none; padding: 8px 12px 10px; border-top: 1px solid var(--fd-line); background: var(--fd-paper); box-shadow: 0 -4px 14px #29372e14; }
.x2-pc-compose .x2-rules { display: -webkit-box; margin-bottom: 6px; overflow: hidden; font-size: 12px; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.x2-pc-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 8px; }
.x2-pc-input { box-sizing: border-box; width: 100%; height: auto; min-height: 66px; padding: 10px; border: 1px solid #c9d1bd; border-radius: 6px; background: #fff; color: var(--fd-ink); font: 400 16px/22px var(--fd-font-sans); resize: none; }
.x2-pc-input::placeholder { color: var(--fd-placeholder); opacity: 1; }
.x2-pc-send { min-width: 64px; min-height: 44px; padding: 6px 14px; border: 1px solid var(--fd-green); border-radius: 6px; background: var(--fd-green); color: #fff; font-size: 13px; font-weight: 600; }
.x2-phone :is(.x2-act, .x2-follow, .x2-room-tab, .x2-seg, .x2-hi-hide, .x2-hi-why, .x2-hu-act, .x2-branch > summary) { min-height: 44px; }
.x2-phone .x2-act--more { min-width: 44px; }
.x2-phone .x2-post { padding: 10px; }
.x2-phone .x2-branch { margin-left: 2px; padding-left: 8px; }
.x2-phone button.x2-avatar { box-sizing: border-box; flex: 0 0 44px; width: 44px; height: 44px; padding: 7px; background-clip: content-box; }
.x2-phone button.x2-name { display: inline-flex; align-items: center; min-height: 44px; }
.x2-here--phone { padding: 10px 12px; }
.x2-here--phone .x2-join { width: 100%; }
.x2-here--phone .x2-seg { flex: 1 1 auto; }
.x2 .x2-seg:focus-visible { outline: 2px solid var(--fd-green-dark); outline-offset: -3px; box-shadow: inset 0 0 0 4px var(--fd-paper); }
.x2 .x2-seg[aria-pressed="true"]:focus-visible { outline-color: var(--fd-paper); box-shadow: inset 0 0 0 4px var(--fd-green-dark); }
/* Phone sheets: drawn in place; in the app they rise from the bottom of the screen */
.x2-sheets { display: grid; grid-template-columns: repeat(2, minmax(0, 375px)); justify-content: center; gap: 18px; }
.x2-sheetstage { display: flex; flex-direction: column; justify-content: flex-end; min-height: 340px; padding-top: 40px; overflow: hidden; border-radius: 6px; background: #1b241e66; }
.x2-sheetstage--menu { background: #1d2a2140; }
.x2-sheet { position: relative; width: 100%; border-radius: 14px 14px 0 0; background: var(--fd-paper); color: var(--fd-ink); box-shadow: 0 -6px 28px #29372e33; }
.x2-sheet-head { position: relative; display: flex; align-items: center; gap: 8px; padding: 16px 14px 8px; border-bottom: 1px solid var(--fd-line); }
.x2-sheet-head .x2-sheet-grip { position: absolute; top: 6px; left: 50%; width: 40px; height: 4px; margin-left: -20px; border-radius: 2px; background: #cdd5bf; }
.x2-sheet-title { flex: 1 1 auto; min-width: 0; font: 600 18px/1.3 var(--fd-font-room); }
.x2-sheet-close { display: inline-flex; align-items: center; justify-content: center; min-width: 64px; min-height: 44px; padding: 8px 12px; border: 1px solid var(--fd-line); border-radius: 8px; background: var(--fd-paper); color: var(--fd-green-dark); font-size: 14px; }
.x2-sheet-close:hover { background: var(--fd-soft); }
.x2-sheet-body { display: grid; gap: 12px; padding: 12px 14px 20px; }
.x2-sheet-h { font: 600 15px/1.4 var(--fd-font-sans); }
.x2-sheet-muted { color: var(--fd-muted); font-size: 13px; line-height: 1.5; }
.x2 a.x2-sheet-link { color: var(--fd-green-dark); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.x2-sheet-row { display: flex; align-items: center; min-height: 44px; }
.x2-sheet-row .x2-rbtn { min-height: 44px; }
.x2-sheet-row .x2-sheet-link { display: inline-flex; align-items: center; min-height: 44px; }
.x2-sheet--menu { display: grid; padding: 10px 14px 16px; border: 1px solid var(--fd-line); border-bottom: 0; box-shadow: var(--fd-shadow-room-menu); }
.x2-sheet--menu .x2-sheet-grip { justify-self: center; width: 40px; height: 4px; margin: 2px 0 8px; border-radius: 2px; background: var(--fd-line); }
.x2-sheet--menu .x2-menu-item { min-height: 48px; font-size: 15px; }
.x2-pills { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.x2-pill { display: inline-flex; align-items: center; gap: 6px; flex: none; min-height: 44px; padding: 6px 14px; border: 1px solid var(--fd-line-2); border-radius: 999px; background: var(--fd-paper); color: var(--fd-ink); font-size: 13px; white-space: nowrap; }
.x2-pill.is-current { border-color: var(--fd-green); background: var(--fd-active); color: var(--fd-green-dark); font-weight: 600; }
/* ---------- States and feedback ---------- */
.x2-loading { color: var(--fd-muted); font-size: 13px; padding: 4px 0; }
.x2-empty { padding: 14px 16px; border: 1px dashed var(--fd-line-2); border-radius: 8px; background: var(--fd-paper); color: var(--fd-muted); font-size: 13px; line-height: 1.55; }
.x2-fail { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 12px 14px; border: 1px solid var(--fd-fail-line); border-radius: 6px; background: var(--fd-fail-bg); }
.x2-fail-note { flex: 1 1 220px; color: var(--fd-fail-ink); font-size: 13px; line-height: 1.45; }
.x2-fail-btn { min-height: 44px; padding: 8px 16px; border: 1px solid var(--fd-green); border-radius: 5px; background: var(--fd-green); color: #fff; font-size: 13px; font-weight: 600; }
.x2-fail-btn:hover { border-color: var(--fd-olive-hover); background: var(--fd-olive-hover); }
.x2-gates { gap: 8px; }
.x2-gate { color: var(--fd-muted); font-size: 13px; }
.x2 .x2-gate-link { color: var(--fd-green-dark); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.x2-headsup, .x2-refusal { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1px solid var(--fd-amber-line); border-radius: 6px; background: var(--fd-amber); color: var(--fd-amber-ink); }
.x2-refusal { border-color: #e2b8b2; background: var(--fd-red-soft); color: #6d231b; }
.x2-hu-icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 20px; width: 20px; height: 20px; margin-top: 1px; border: 1.5px solid currentColor; border-radius: 50%; font: 700 12px/1 var(--fd-font-sans); }
.x2-hu-main { display: grid; gap: 6px; min-width: 0; }
.x2-hu-text { font-size: 13px; line-height: 1.5; }
.x2-hu-acts { display: flex; gap: 6px; }
.x2-hu-act { display: inline-flex; align-items: center; min-height: 30px; padding: 2px 10px; border: 1px solid currentColor; border-radius: 6px; background: #fffdf5; color: inherit; font-size: 12.5px; }
.x2-hu-whytext { font-size: 12.5px; line-height: 1.5; }
.x2-err { color: var(--fd-red); font-size: 12.5px; }
.x2-saved { display: inline-flex; align-items: center; gap: 6px; color: var(--fd-answered); font-size: 12.5px; font-weight: 600; }
.x2-scrim--room { padding: 28px 16px; background: #1d2a2140; }
.x2-rdialog { display: grid; gap: 12px; width: min(460px, 100%); padding: 20px; border: 1px solid var(--fd-line); border-radius: 10px; background: var(--fd-paper); color: var(--fd-ink); box-shadow: 0 12px 40px #29372e40; font-size: 14px; }
.x2-rdialog-title { font: 600 20px/1.3 var(--fd-font-room); }
.x2-rdialog-text { color: var(--fd-muted); font-size: 13px; }
.x2-rdialog-foot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.x2-toasts { display: grid; justify-items: start; gap: 8px; }
.x2-toast { display: inline-block; max-width: 520px; padding: 10px 16px; border-radius: 8px; background: var(--fd-green-dark); color: #fff; font-size: 13.5px; box-shadow: 0 6px 20px #29372e40; }
.x2-states { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 22px; }
/* ---------- Match-M8 and plan features ---------- */
.x2-matchbox { display: flex; flex-direction: column; gap: 8px; padding: 16px; border: 1px solid var(--fd-callout-line); border-radius: 10px; background: var(--fd-callout); }
.x2-matchbox-top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 12px; }
.x2-matchbox-big { font-size: 16px; font-weight: 700; color: var(--fd-count-ink); }
.x2-matchbox-list { padding-left: 18px; font-size: 15px; line-height: 1.6; color: var(--fd-ink); list-style: disc; }
.x2 .x2-matchbox-list { list-style: disc; padding-left: 18px; }
.x2-note { font-size: 14px; line-height: 1.5; color: var(--fd-muted); }
.x2-wk { padding: 16px 18px; border: 1px solid var(--fd-line); border-top: 4px solid var(--fd-green); border-radius: 8px; background: var(--fd-paper); }
.x2-wk-h { display: flex; align-items: center; margin: 0 0 8px; padding-bottom: 6px; border-bottom: 1px solid var(--fd-line); font: 600 16px/1.35 var(--fd-font-sans); color: var(--fd-ink); }
.x2-wk-job { margin: 0 0 10px; font-size: 15px; line-height: 1.5; color: var(--fd-ink); }
.x2-wk-sub { margin: 12px 0 4px; font-size: 14px; font-weight: 700; color: var(--fd-muted); }
.x2-wk-list li { padding: 6px 0; border-top: 1px solid var(--fd-line); font-size: 14px; line-height: 1.5; }
.x2-wk-amt { color: var(--fd-count-ink); }
.x2-wk-tag { display: inline-block; margin-left: 8px; padding: 1px 8px; border: 1px solid var(--fd-line-2); border-radius: 999px; background: var(--fd-bg); color: var(--fd-muted); font-size: 11.5px; font-weight: 700; }
.x2-wk-quiet { margin: 10px 0 0; font-size: 13px; line-height: 1.5; color: var(--fd-muted); }
.x2-band { display: flex; gap: 10px; margin: 6px 0 12px; }
.x2-band-cell { flex: 1 1 0; padding: 12px; border: 1px solid var(--fd-line); border-radius: 8px; background: var(--fd-soft); text-align: center; }
.x2-band-val { display: block; font-size: 20px; font-weight: 700; color: var(--fd-count-ink); }
.x2-band-lbl { display: block; font-size: 13px; color: var(--fd-muted); }
/* ---------- Plan tiles demo ---------- */
.x2-tiles { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 22px; align-items: start; }
.x2-tiles-col { display: grid; gap: 16px; min-width: 0; }
.x2-featlist { display: grid; gap: 0; max-width: 460px; padding: 4px 14px; border: 1px solid var(--fd-line); border-radius: 8px; background: var(--fd-paper); }
.x2-featlist li { display: flex; align-items: center; min-height: 44px; border-top: 1px solid var(--fd-line); font-size: 13.5px; color: var(--fd-ink); }
.x2-featlist li:first-child { border-top: 0; }
.x2 .plan-lock { margin: 0; }
.x2-tileforms { align-items: flex-start; gap: 16px 28px; }
.x2-tileforms .x2-chipcell { max-width: 220px; }
/* ---------- Words ---------- */
.x2-voice { display: grid; gap: 8px; max-width: 72ch; margin: 0 0 18px; padding: 0; list-style: none; }
.x2-voice li { position: relative; padding-left: 18px; color: var(--fd-ink); font-size: 14px; line-height: 1.6; }
.x2-voice li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: var(--fd-green); }
/* ---------- Full-screen samples: a 1440 x 1000 screen scaled to the frame it sits in ---------- */
.x2-fitbox { container-type: inline-size; }
.x2-fit { zoom: .5; }
@container (min-width: 636px) { .x2-fit { zoom: .44; } }
@container (min-width: 722px) { .x2-fit { zoom: .5; } }
@container (min-width: 794px) { .x2-fit { zoom: .55; } }
@container (min-width: 866px) { .x2-fit { zoom: .6; } }
@container (min-width: 952px) { .x2-fit { zoom: .66; } }
@container (min-width: 1010px) { .x2-fit { zoom: .7; } }
@container (min-width: 1068px) { .x2-fit { zoom: .74; } }
/* ---------- Phone samples: a true 375 x 812 screen inside the frame's border, scaled down on a narrow page ---------- */
.x2-phonespec { container: x2-phone / inline-size; }
.x2-phonespec > .ds-phone { box-sizing: content-box; width: 375px; height: 812px; max-width: none; }
@container x2-phone (width < 395px) { .x2-phonespec > .ds-phone { zoom: .94; } }
@container x2-phone (width < 364px) { .x2-phonespec > .ds-phone { zoom: .9; } }
@container x2-phone (width < 349px) { .x2-phonespec > .ds-phone { zoom: .86; } }
@container x2-phone (width < 333px) { .x2-phonespec > .ds-phone { zoom: .82; } }
@container x2-phone (width < 318px) { .x2-phonespec > .ds-phone { zoom: .78; } }
@container x2-phone (width < 302px) { .x2-phonespec > .ds-phone { zoom: .74; } }
@container x2-phone (width < 287px) { .x2-phonespec > .ds-phone { zoom: .7; } }
@container x2-phone (width < 271px) { .x2-phonespec > .ds-phone { zoom: .66; } }
@container x2-phone (width < 256px) { .x2-phonespec > .ds-phone { zoom: .62; } }
@container x2-phone (width < 240px) { .x2-phonespec > .ds-phone { zoom: .56; } }
/* ---------- Wide and narrow screens ---------- */
@media (max-width: 1000px) {
.x2-principles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
.x2-tiles, .x2-cols, .x2-states, .x2-controls-grid, .x2-doors, .x2-sheets { grid-template-columns: minmax(0, 1fr); }
.x2-metrics { grid-template-columns: minmax(0, 1fr); }
.x2-rail-states { grid-template-columns: 190px; }
.x2:not(.x2-app) :is(.x2-act, .x2-follow, .x2-room-tab, .x2-rbtn, .x2-seg, .x2-hibtn, .x2-fp-segbtn, .x2-fp-chip, .x2-fp-check, .x2-fp-input, .x2-ch-btn, .x2-ch-room, .x2-ch-linkbtn, .x2-ch-name, .x2-talk, .x2-branch > summary, .x2-newpill, .x2-lchip, .x2-menu-item, .x2-hi-hide, .x2-hi-why, .x2-hu-act, .x2-name) { min-height: 44px; }
.x2:not(.x2-app) .x2-act--more { min-width: 44px; }
.x2:not(.x2-app) :is(a.x2-ch-link, .x2-menu-link, .x2-host-links a, .x2-matchbox-top .x2-link) { display: inline-flex; align-items: center; min-height: 44px; }
.x2:not(.x2-app) .x2-host-links li { padding: 9px 0; }
.x2:not(.x2-app) .x2-talk { padding: 6px 14px; }
.x2:not(.x2-app) :is(.x2-cinput, .x2-ch-input, .x2-fp-input, .x2-input, .x2-select, .x2-textarea) { font-size: 16px; }
.x2:not(.x2-app) .x2-fp-input { max-width: none; }
.x2:not(.x2-app) .x2-fp-input.x2-fp-code { max-width: 160px; }
.x2-band { gap: 6px; }
.x2-band-cell { padding: 10px 4px; }
.x2-band-val { font-size: 17px; }
}
@media (max-width: 680px) {
.x2-principles { grid-template-columns: minmax(0, 1fr); }
.x2-only-narrow { display: block; }
.x2-space-row { grid-template-columns: 34px 34px minmax(0, 1fr); }
.x2-dialog { padding: 20px; }
.x2-dialog-title { font-size: 24px; }
}
@media (prefers-reduced-motion: reduce) {
.x2 * { transition: none !important; animation: none !important; }
}
All files
source-*.html files are the original page source, served as text. Open the original page for the live, interactive version.