/* Priors: the ledger and the bonsai. A credit house, not a dashboard. Paper and ink by day, the grove by night. EB Garamond for what we say, Schibsted Grotesk for how it works, IBM Plex Mono only for things you would copy (ids, addresses, code). No pills, no glow, no tracked-out capitals. Every class the page scripts generate is styled here. */ :root { --paper: #f1ece1; --paper-2: #e9e2d3; --paper-3: #e2dac8; --ink: #1b1a16; --ink-2: #3a372f; --muted: #6d675a; --faint: #71695b; /* 4.6:1 on --paper (WCAG AA for text) */ --rule: #cbc2af; --rule-2: #ddd5c4; --field: #faf7f0; --field-edge: #a69c86; --green: #2f6b4f; --green-2: #3f8a67; --green-soft: rgba(47, 107, 79, .1); --red: #a9432c; --red-soft: rgba(169, 67, 44, .1); --brass: #94763a; --brass-soft: rgba(148, 118, 58, .12); --night: #0f1411; --night-2: #161c18; --night-ink: #e8e2d2; --night-muted: #9b9788; --night-rule: #2a322d; --leaf: #84c49f; --serif: "EB Garamond", "Iowan Old Style", Georgia, serif; --sans: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif; --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace; --ease: cubic-bezier(.22, .61, .21, 1); --nav-bg: rgba(241, 236, 225, .94); --hover: rgba(27, 26, 22, .03); --shade: rgba(27, 26, 22, .06); color-scheme: light; /* legacy names the scripts and older markup still reference */ --bg: var(--paper); --text: var(--ink); --text-2: var(--ink-2); --mint: var(--green); --coral: var(--red); --acc: var(--green); --acc-2: var(--green-2); --rose: var(--brass); --gold: var(--brass); } /* dark: the same ledger after hours. Warm ink-black paper, bone ink; the grove panels stay their own night. */ :root[data-theme="dark"] { --paper: #15140f; --paper-2: #1d1c16; --paper-3: #27251e; --ink: #ece6d6; --ink-2: #cdc6b5; --muted: #9d9686; --faint: #8e877a; /* 5.2:1 on --paper */ --rule: #3b382f; --rule-2: #2a2821; --field: #1b1a14; --field-edge: #5f5a4c; --green: #7fbf98; --green-2: #95d0ab; --green-soft: rgba(127, 191, 152, .12); --red: #e0876d; --red-soft: rgba(224, 135, 109, .12); --brass: #d1ae68; --brass-soft: rgba(209, 174, 104, .14); --nav-bg: rgba(21, 20, 15, .92); --hover: rgba(236, 230, 214, .04); --shade: rgba(0, 0, 0, .35); --night: #0c100d; color-scheme: dark; } :root[data-theme="dark"] .brand svg [fill="#1b1a16"] { fill: var(--ink); } :root[data-theme="dark"] .brand svg [fill="#2f6b4f"] { fill: var(--green); } * { box-sizing: border-box; } [hidden] { display: none !important; } html { background: var(--paper); scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--paper); color: var(--ink); font: 400 16px/1.55 var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } a { color: inherit; text-decoration: none; } p { margin: 0; } h1, h2, h3, h4 { margin: 0; font-weight: 400; } img { display: block; max-width: 100%; } ::selection { background: rgba(47, 107, 79, .22); } :focus-visible { outline: 2px solid var(--green); outline-offset: 3px; } .wrap { max-width: 1180px; margin: 0 auto; padding-inline: 32px; } .num, .mono { font-variant-numeric: lining-nums tabular-nums; } .mono, code { font-family: var(--mono); } .label { font-size: 13px; color: var(--muted); font-weight: 400; } .sub { color: var(--muted); font-size: 14px; } .k { color: var(--green); } .g { color: var(--green); } .r { color: var(--red); } .o { color: var(--brass); } .c { color: var(--muted); } .y { color: var(--brass); } a.k, .prose a, .d a, .board-heading p a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; } a.k:hover { color: var(--ink); } .skip-link { position: fixed; top: -80px; left: 20px; z-index: 100; padding: 12px 20px; background: var(--ink); color: var(--paper); } .skip-link:focus { top: 10px; } section[id] { scroll-margin-top: 90px; } /* ------------------------------------------------------------------ masthead */ .nav { position: sticky; top: 0; z-index: 30; background: var(--nav-bg); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid var(--ink); } .nav .wrap { display: flex; align-items: center; gap: 34px; height: 66px; max-width: 1280px; } .brand { display: inline-flex; align-items: center; gap: 10px; } .brand svg { width: 26px; height: 26px; } .brand span { font: 500 26px/1 var(--serif); letter-spacing: -.01em; } /* the serif wordmark sits 4px below the links' baseline; meet halfway so they read as one line */ .brand span { position: relative; top: -2px; } .links { display: flex; gap: 20px; font-size: 15px; padding-top: 4px; } .links .dd-top { white-space: nowrap; } /* a menu's title and its caret on one line */ .links a { color: var(--ink-2); padding: 4px 0; border-bottom: 1px solid transparent; } .links a:hover { color: var(--ink); } .links a.on { color: var(--ink); border-bottom-color: var(--ink); } .nav .right { margin-left: auto; display: flex; align-items: center; gap: 14px; } .nav .sub { display: none; } /* the chain reader's state: a mono block counter beside a pixel bonsai (the logo's, in miniature). Its trunk and pot sit on .dot::before, its canopy on .dot::after; while live the canopy fills in a row per new block (data-n 1-4 on #status, set by setStatus in app.js / agent.js; no data-n is the full tree), then it is pruned back and grows again. A snapshot is the whole tree in brass, still; an error, the bare trunk in coral. */ .status { display: inline-flex; align-items: center; gap: 9px; font: 500 12px/1 var(--mono); font-variant-numeric: tabular-nums; color: var(--muted); white-space: nowrap; } .status .dot { position: relative; top: -1px; flex: none; width: 14px; height: 16px; } .status .dot::before, .status .dot::after { content: ""; position: absolute; inset: 0; background: var(--faint); } .status .dot::before { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 8' shape-rendering='crispEdges'%3E%3Crect x='3' y='4' width='2' height='1'/%3E%3Crect x='3' y='5' width='1' height='1'/%3E%3Crect x='1' y='6' width='5' height='1'/%3E%3Crect x='2' y='7' width='3' height='1'/%3E%3C/svg%3E") 0 0 / 14px 16px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 8' shape-rendering='crispEdges'%3E%3Crect x='3' y='4' width='2' height='1'/%3E%3Crect x='3' y='5' width='1' height='1'/%3E%3Crect x='1' y='6' width='5' height='1'/%3E%3Crect x='2' y='7' width='3' height='1'/%3E%3C/svg%3E") 0 0 / 14px 16px no-repeat; } .status .dot::after { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 35 8' shape-rendering='crispEdges'%3E%3Crect x='8' y='3' width='2' height='1'/%3E%3Crect x='11' y='3' width='2' height='1'/%3E%3Crect x='14' y='2' width='7' height='1'/%3E%3Crect x='15' y='3' width='2' height='1'/%3E%3Crect x='18' y='3' width='2' height='1'/%3E%3Crect x='22' y='1' width='5' height='1'/%3E%3Crect x='21' y='2' width='7' height='1'/%3E%3Crect x='22' y='3' width='2' height='1'/%3E%3Crect x='25' y='3' width='2' height='1'/%3E%3Crect x='30' y='0' width='3' height='1'/%3E%3Crect x='29' y='1' width='5' height='1'/%3E%3Crect x='28' y='2' width='7' height='1'/%3E%3Crect x='29' y='3' width='2' height='1'/%3E%3Crect x='32' y='3' width='2' height='1'/%3E%3C/svg%3E") -56px 0 / 70px 16px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 35 8' shape-rendering='crispEdges'%3E%3Crect x='8' y='3' width='2' height='1'/%3E%3Crect x='11' y='3' width='2' height='1'/%3E%3Crect x='14' y='2' width='7' height='1'/%3E%3Crect x='15' y='3' width='2' height='1'/%3E%3Crect x='18' y='3' width='2' height='1'/%3E%3Crect x='22' y='1' width='5' height='1'/%3E%3Crect x='21' y='2' width='7' height='1'/%3E%3Crect x='22' y='3' width='2' height='1'/%3E%3Crect x='25' y='3' width='2' height='1'/%3E%3Crect x='30' y='0' width='3' height='1'/%3E%3Crect x='29' y='1' width='5' height='1'/%3E%3Crect x='28' y='2' width='7' height='1'/%3E%3Crect x='29' y='3' width='2' height='1'/%3E%3Crect x='32' y='3' width='2' height='1'/%3E%3C/svg%3E") -56px 0 / 70px 16px no-repeat; } .status.live { color: var(--ink-2); } .status.live .dot::before { background: linear-gradient(var(--red) 75%, var(--ink-2) 0); } .status.live .dot::after { background: var(--green); } .status.live[data-n="1"] .dot::after { -webkit-mask-position: -14px 0; mask-position: -14px 0; } .status.live[data-n="2"] .dot::after { -webkit-mask-position: -28px 0; mask-position: -28px 0; } .status.live[data-n="3"] .dot::after { -webkit-mask-position: -42px 0; mask-position: -42px 0; } /* live: the seedling grows on a loop (sprout, three canopy rows, then the full tree held), so the reader reads as alive. Still under reduced motion: the full tree. */ @keyframes status-grow { 0% { -webkit-mask-position: -14px 0; mask-position: -14px 0; } 18% { -webkit-mask-position: -28px 0; mask-position: -28px 0; } 36% { -webkit-mask-position: -42px 0; mask-position: -42px 0; } 54%, 100% { -webkit-mask-position: -56px 0; mask-position: -56px 0; } } .status.live .dot::after { animation: status-grow 3.6s step-end infinite; } @media (prefers-reduced-motion: reduce) { .status.live .dot::after { animation: none; } } .status.snapshot { color: var(--brass); } .status.snapshot .dot::before, .status.snapshot .dot::after { background: var(--brass); } .status.error { color: var(--red); } .status.error .dot::before { background: var(--red); } .status.error .dot::after { -webkit-mask-position: 0 0; mask-position: 0 0; } .nav.solid { box-shadow: 0 6px 24px var(--shade); } .reading-progress { position: absolute; bottom: -1px; left: 0; height: 2px; width: 100%; background: var(--green); transform-origin: left; } /* buttons: rectangles of ink, or quiet outlines */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 12px 18px; font: 500 15px/1 var(--sans); border: 1px solid var(--ink); background: transparent; color: var(--ink); cursor: pointer; transition: background .15s, color .15s, border-color .15s; white-space: nowrap; } .btn:hover { background: var(--ink); color: var(--paper); } .btn.primary, .btn.ink { background: var(--ink); color: var(--paper); } .btn.primary:hover, .btn.ink:hover { background: var(--green); border-color: var(--green); color: var(--paper); } .btn.sm { padding: 9px 14px; font-size: 14px; } .btn .arr { display: inline-block; transition: transform .3s var(--ease); } .btn:hover .arr { transform: translateX(3px); } /* disabled: plainly not pressable. Faded, a dashed edge, the not-allowed cursor, and no hover change */ .btn:disabled, .btn:disabled:hover { opacity: .5; cursor: not-allowed; color: var(--muted); border-color: var(--field-edge); background: transparent; box-shadow: none; } .btn.primary:disabled, .btn.primary:disabled:hover { background: var(--paper-3); border-color: var(--field-edge); color: var(--ink-2); } .btn:disabled .arr, .btn:disabled:hover .arr { transform: none; } .btn.on { background: var(--green-soft); border-color: var(--green); color: var(--green); } .agentbtn { background: var(--ink); color: var(--paper); } /* x402, beside "Your agent": outlined, with a small "new" mark (build-time switch SITE_X402_BUTTON) */ .x402btn { gap: 8px; } .x402btn .mk { font: 600 10px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--paper); background: var(--green); padding: 3px 5px 2px; } .x402btn:hover .mk { background: var(--paper); color: var(--ink); } .agentbtn:hover, .agentbtn.on { background: var(--green); border-color: var(--green); color: var(--paper); } /* Go mode, beside Join: the app (go.priors.trade; me.js points it at the account's origin). A block of ink with pixel-stepped corners and the app's pixel sprout (goapp.js ICONS.sprout), which grows a pixel on hover. The shape is drawn on ::after, so the focus ring around the button is never clipped. */ .gobtn { position: relative; isolation: isolate; gap: 8px; padding-left: 12px; border-color: transparent; color: var(--paper); --go-glyph: var(--leaf); } :root[data-theme="dark"] .gobtn { --go-glyph: #2f6b4f; } .gobtn::after { content: ""; position: absolute; inset: -1px; z-index: -1; background: var(--ink); transition: background-color .15s; clip-path: polygon(0 6px, 3px 6px, 3px 3px, 6px 3px, 6px 0, calc(100% - 6px) 0, calc(100% - 6px) 3px, calc(100% - 3px) 3px, calc(100% - 3px) 6px, 100% 6px, 100% calc(100% - 6px), calc(100% - 3px) calc(100% - 6px), calc(100% - 3px) calc(100% - 3px), calc(100% - 6px) calc(100% - 3px), calc(100% - 6px) 100%, 6px 100%, 6px calc(100% - 3px), 3px calc(100% - 3px), 3px calc(100% - 6px), 0 calc(100% - 6px)); } .gobtn::before { content: ""; flex: none; width: 20px; height: 20px; margin-block: -3px; background: var(--go-glyph); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 10' shape-rendering='crispEdges'%3E%3Crect x='1' y='1' width='2' height='1'/%3E%3Crect x='7' y='1' width='2' height='1'/%3E%3Crect x='0' y='2' width='4' height='1'/%3E%3Crect x='6' y='2' width='4' height='1'/%3E%3Crect x='1' y='3' width='4' height='1'/%3E%3Crect x='6' y='3' width='3' height='1'/%3E%3Crect x='3' y='4' width='4' height='1'/%3E%3Crect x='4' y='5' width='2' height='1'/%3E%3Crect x='4' y='6' width='2' height='1'/%3E%3Crect x='4' y='7' width='2' height='1'/%3E%3Crect x='2' y='8' width='6' height='1'/%3E%3Crect x='11' y='0' width='2' height='1'/%3E%3Crect x='17' y='0' width='2' height='1'/%3E%3Crect x='10' y='1' width='4' height='1'/%3E%3Crect x='16' y='1' width='4' height='1'/%3E%3Crect x='11' y='2' width='4' height='1'/%3E%3Crect x='16' y='2' width='3' height='1'/%3E%3Crect x='13' y='3' width='4' height='1'/%3E%3Crect x='14' y='4' width='2' height='1'/%3E%3Crect x='14' y='5' width='2' height='1'/%3E%3Crect x='14' y='6' width='2' height='1'/%3E%3Crect x='14' y='7' width='2' height='1'/%3E%3Crect x='12' y='8' width='6' height='1'/%3E%3C/svg%3E") 0 0 / 40px 20px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 10' shape-rendering='crispEdges'%3E%3Crect x='1' y='1' width='2' height='1'/%3E%3Crect x='7' y='1' width='2' height='1'/%3E%3Crect x='0' y='2' width='4' height='1'/%3E%3Crect x='6' y='2' width='4' height='1'/%3E%3Crect x='1' y='3' width='4' height='1'/%3E%3Crect x='6' y='3' width='3' height='1'/%3E%3Crect x='3' y='4' width='4' height='1'/%3E%3Crect x='4' y='5' width='2' height='1'/%3E%3Crect x='4' y='6' width='2' height='1'/%3E%3Crect x='4' y='7' width='2' height='1'/%3E%3Crect x='2' y='8' width='6' height='1'/%3E%3Crect x='11' y='0' width='2' height='1'/%3E%3Crect x='17' y='0' width='2' height='1'/%3E%3Crect x='10' y='1' width='4' height='1'/%3E%3Crect x='16' y='1' width='4' height='1'/%3E%3Crect x='11' y='2' width='4' height='1'/%3E%3Crect x='16' y='2' width='3' height='1'/%3E%3Crect x='13' y='3' width='4' height='1'/%3E%3Crect x='14' y='4' width='2' height='1'/%3E%3Crect x='14' y='5' width='2' height='1'/%3E%3Crect x='14' y='6' width='2' height='1'/%3E%3Crect x='14' y='7' width='2' height='1'/%3E%3Crect x='12' y='8' width='6' height='1'/%3E%3C/svg%3E") 0 0 / 40px 20px no-repeat; } .gobtn:hover { background: transparent; border-color: transparent; color: var(--paper); } .gobtn:hover::after { background-color: var(--green); } .gobtn:hover::before { background: var(--paper); -webkit-mask-position: -20px 0; mask-position: -20px 0; } .gobtn:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; } @media (prefers-reduced-motion: reduce) { .gobtn::after { transition: none; } } .link { font-weight: 500; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; } .link:hover { color: var(--green); } /* ------------------------------------------------------------------ page heading (inner pages) */ .app-main { max-width: 1280px; padding-block: 40px 88px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; } .app-main > * { min-width: 0; } .board-heading { padding: 18px 0 8px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: end; padding-bottom: 28px; } .eyebrow { font-size: 15px; color: var(--green); margin-bottom: 14px; } .eyebrow > span { display: none; } .eyebrow .ek { font-style: italic; font-family: var(--serif); font-size: 17px; } .board-heading h1 { font: 400 clamp(38px, 5vw, 64px)/1.02 var(--serif); letter-spacing: -.02em; } .board-heading h1 em, .hero-accent { font-style: italic; color: var(--green); } .board-heading p { margin-top: 16px; max-width: 40em; font: 400 19px/1.55 var(--serif); color: var(--ink-2); } .board-heading .aside { font-size: 14px; color: var(--muted); text-align: right; max-width: 22em; } /* ------------------------------------------------------------------ panels */ .panel { border-top: 1px solid var(--ink); background: transparent; } .panel > header { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 16px; padding: 14px 0 14px; border-bottom: 1px solid var(--rule); } .panel > header h2 { font: 400 26px/1.15 var(--serif); letter-spacing: -.01em; } .panel > header .sub { font-size: 14px; } .panel > header .label { margin-left: auto; font-size: 14px; color: var(--muted); } .panel > header .btn { margin-left: auto; } .split { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 36px; align-items: start; } .split > * { min-width: 0; } .side { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; min-width: 0; } .side > * { min-width: 0; } .grid2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: start; } .grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; align-items: start; } .grid2 + .grid2, .grid2 + .panel { margin-top: 8px; } /* the account: figures as a ruled ledger row */ .kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); } .kpi { padding: 22px 22px 20px; border-left: 1px solid var(--rule); position: relative; min-width: 0; } .kpi:first-child { border-left: 0; padding-left: 0; } .kpi .label { font-size: 14px; color: var(--muted); margin-bottom: 8px; } .kpi .val { font: 400 clamp(32px, 3.4vw, 46px)/1.05 var(--serif); letter-spacing: -.015em; font-variant-numeric: lining-nums tabular-nums; } .kpi .val.rec { font: 500 18px/1.3 var(--mono); letter-spacing: .04em; color: var(--green); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-top: 10px; } .kpi .val.rec .r { color: var(--red); } .kpi .val.rec .o { color: var(--brass); } .kpi .sub { margin-top: 8px; font-size: 14px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .kpi.good .val { color: var(--green); } .kpi.bad .val { color: var(--red); } .kpi::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--green); opacity: 0; transition: opacity .9s; } .kpi.tick::after { opacity: 1; } /* ------------------------------------------------------------------ tables */ .tablewrap, .tblwrap { overflow-x: auto; } table { border-collapse: collapse; width: 100%; min-width: 720px; } th, td { text-align: left; padding: 11px 9px; border-bottom: 1px solid var(--rule-2); vertical-align: middle; white-space: nowrap; font-size: 14.5px; } th:first-child, td:first-child { padding-left: 0; } th:last-child, td:last-child { padding-right: 0; } th { font-size: 13px; font-weight: 500; color: var(--muted); border-bottom: 1px solid var(--ink); background: transparent; } th .sub { font-weight: 400; color: var(--faint); margin-left: 6px; font-size: 12px; } tbody tr { transition: background .3s; } tbody tr:hover td { background: var(--hover); } tbody tr:last-child td { border-bottom: 0; } td.num, th.num { text-align: right; font-variant-numeric: lining-nums tabular-nums; } td.rank { color: var(--faint); width: 44px; font-variant-numeric: tabular-nums; } td.wrapcell { white-space: normal; min-width: 120px; } tr.empty td { padding: 26px 0; color: var(--muted); } th.sortable { cursor: pointer; user-select: none; } th.sortable:hover { color: var(--ink); } th.sortable.on { color: var(--ink); } th.sortable.on::after { content: " ↓"; } th.sortable.on[aria-sort="ascending"]::after { content: " ↑"; } tr.top td.rank { color: var(--green); } tr.dead .nm, tr.dead .scorecell b { color: var(--red); } @keyframes rowFlash { from { background: var(--green-soft); } to { background: transparent; } } tr.flash td { animation: rowFlash 3s ease-out both; } table.score-table, table.loans-table { min-width: 520px; } .tbl { min-width: 0; } .tbl td.n { text-align: right; font-variant-numeric: tabular-nums; } .tbl td.c { color: var(--muted); white-space: normal; font-size: 14px; } /* agents in tables */ .agent { display: flex; align-items: center; gap: 12px; } a.agent:hover .nm { color: var(--green); } .agent .av { width: 32px; height: 32px; display: grid; place-items: center; background: var(--paper-2); border: 1px solid var(--rule); font: 500 12px var(--mono); color: var(--ink-2); flex-shrink: 0; } .agent .av.root { background: var(--brass-soft); border-color: var(--brass); color: var(--brass); } .agent .av.dead { background: var(--red-soft); border-color: var(--red); color: var(--red); } .agent .nm { font: 500 17px/1.2 var(--serif); } .agent .nm a:hover { color: var(--green); } .agent .id { font: 12px var(--mono); color: var(--muted); } .scorecell { display: flex; align-items: center; gap: 10px; min-width: 110px; } .scorecell b { font-weight: 500; min-width: 3ch; font-variant-numeric: tabular-nums; } tr.top .scorecell b { color: var(--green); } .bar, .lbar { flex: 1; height: 4px; background: var(--rule-2); position: relative; overflow: hidden; } .bar i { position: absolute; inset: 0 auto 0 0; background: var(--ink); transition: width 1.6s var(--ease); } .bar.dead i { background: var(--red); } .lbar i { display: block; height: 100%; width: 0; background: var(--green); transition: width 1.6s var(--ease); } .lbar.root i { background: var(--brass); } .lbar.dead i { background: var(--red); } .linecell { display: grid; gap: 6px; min-width: 110px; max-width: 170px; } .linecell span { font-size: 14px; font-variant-numeric: tabular-nums; } .linecell em { font-style: normal; color: var(--muted); } td.rec { font: 13px var(--mono); color: var(--green); letter-spacing: .03em; max-width: 150px; overflow: hidden; text-overflow: ellipsis; } td.rec .r { color: var(--red); } td.rec .o { color: var(--brass); } .pager { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; border-top: 1px solid var(--ink); } .pager[hidden] { display: none; } /* chips: a word with a mark, never a pill */ .chip { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 500; color: var(--ink-2); } .chip::before { content: ""; width: 7px; height: 7px; background: currentColor; } .chip.ok { color: var(--green); } .chip.warn, .chip.root { color: var(--brass); } .chip.bad { color: var(--red); } .chip.neutral { color: var(--ink-2); } /* filters and search */ .lbtools { display: flex; align-items: center; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--rule-2); flex-wrap: wrap; } .lbtools .seg { display: inline-flex; gap: 18px; } .lbtools .seg button { font: 500 14px var(--sans); padding: 4px 0; background: none; border: 0; border-bottom: 1px solid transparent; color: var(--muted); cursor: pointer; } .lbtools .seg button:hover { color: var(--ink); } .lbtools .seg button.on { color: var(--ink); border-bottom-color: var(--ink); } input, textarea { font: 15px var(--sans); color: var(--ink); background: var(--field); border: 1px solid var(--field-edge); padding: 11px 12px; border-radius: 0; outline: none; } input::placeholder, textarea::placeholder { color: var(--faint); opacity: 1; } input:focus, textarea:focus { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); } input:disabled, textarea:disabled { background: var(--paper-2); color: var(--muted); cursor: not-allowed; } .lbtools input { margin-left: auto; width: 220px; max-width: 100%; padding: 9px 12px; font-size: 14px; } /* ------------------------------------------------------------------ the grove (night) */ .grove, .map, .seatgrove { position: relative; height: clamp(420px, 58vh, 820px); background: var(--night); overflow: hidden; } .grove canvas, .map canvas { position: absolute; inset: 0; width: 100%; height: 100%; } .tip, .grove .tip, .schem .tip { position: absolute; z-index: 2; pointer-events: none; padding: 9px 12px; background: var(--night-2); border: 1px solid var(--night-rule); color: var(--night-muted); font-size: 13px; line-height: 1.5; max-width: 250px; } .tip b { color: var(--night-ink); font-weight: 500; } .map { height: 380px; } .map .legend { position: absolute; left: 14px; bottom: 12px; display: inline-flex; gap: 14px; font-size: 12px; color: var(--night-muted); } .map .legend i { display: inline-block; width: 7px; height: 7px; margin-right: 6px; vertical-align: middle; } /* capital bar */ .cap { padding: 16px 0 4px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; } .capbar { display: flex; height: 8px; overflow: hidden; background: var(--rule-2); margin-bottom: 4px; } .capbar i { display: block; height: 100%; width: 0; transition: width 1.6s var(--ease); } .cap .idle { background: var(--ink-2); } .cap .out { background: var(--brass); } .cap .stake { background: var(--red); } .cap .res { background: var(--green); } .caprow { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; gap: 12px; align-items: center; font-size: 15px; color: var(--ink-2); } .caprow i { width: 8px; height: 8px; } .caprow b { font: 400 20px var(--serif); color: var(--ink); font-variant-numeric: lining-nums tabular-nums; } /* activity */ .ledger { max-height: 560px; overflow: auto; } .ev { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--rule-2); align-items: start; font-size: 14px; } .ev:last-child { border-bottom: 0; } .ev .k { width: 7px; height: 7px; margin-top: 7px; background: var(--faint); } .ev.repaid .k, .ev.claimed .k { background: var(--green); } .ev.borrowed .k { background: var(--ink-2); } .ev.vouched .k, .ev.root .k { background: var(--brass); } .ev.defaulted .k, .ev.recourse .k, .ev.slashed .k { background: var(--red); } .ev .d { color: var(--ink-2); overflow-wrap: anywhere; } .ev .d b { color: var(--ink); font-weight: 500; } .ev .t { display: block; font-size: 12.5px; color: var(--muted); margin-top: 2px; } .ev .t a:hover { color: var(--green); } .ev .a { font-variant-numeric: tabular-nums; font-weight: 500; text-align: right; } .ev.repaid .a, .ev.claimed .a { color: var(--green); } .ev.defaulted .a { color: var(--red); } @keyframes evIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } } .ev.new { animation: evIn 1.4s ease-out both; } /* ------------------------------------------------------------------ boxes, code, definitions */ .box { border-top: 1px solid var(--ink); min-width: 0; } .box > header { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--rule); font-size: 14px; color: var(--muted); } .box > header span:first-child { font: italic 400 18px/1.2 var(--serif); color: var(--ink); } .box > header span:last-child { margin-left: auto; font: 12.5px var(--mono); } pre, .code { margin: 0; padding: 18px 20px; background: var(--paper-2); border: 0; font: 13px/1.75 var(--mono); color: var(--ink-2); white-space: pre; overflow-x: auto; } .code b, pre b { color: var(--ink); font-weight: 500; } .code .cm, pre .cm { color: var(--faint); } .code .line { display: block; margin-inline: -20px; padding-inline: 20px; transition: background .6s; } .code .line.hi { background: var(--green-soft); } .branch, #p-cast { line-height: 1.9; white-space: pre-wrap; overflow-wrap: anywhere; } /* an agent's badge on its record (agent.js): the live SVG, Copy badge, and its Markdown, selectable by hand */ .ag-badge-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 14px 0 12px; } .ag-badge-row img { display: block; height: 20px; max-width: 100%; } .ag-badge-md { display: block; width: 100%; resize: none; padding: 12px 14px; font-size: 12px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; } .ag-badge-s { min-height: 1.5em; margin-top: 8px; font-size: 13px; } .branch a:hover { color: var(--green); } .prose { font: 400 18px/1.6 var(--serif); color: var(--ink-2); padding: 16px 0; } .prose b { color: var(--ink); font-weight: 500; } .prose p + p { margin-top: 12px; } .defs { display: grid; grid-template-columns: minmax(0, 1fr); } .def { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 18px; padding: 14px 0; border-bottom: 1px solid var(--rule-2); font-size: 15px; } .def:last-child { border-bottom: 0; } .def .t { font: 500 17px/1.3 var(--serif); color: var(--ink); } .def .d { color: var(--ink-2); } .kv { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 10px 16px; font-size: 14px; padding: 16px 0; } .kv span { color: var(--muted); } .kv code { overflow-wrap: anywhere; color: var(--ink-2); font-size: 13px; } .kv a { color: var(--green); } #p-verify code a { color: var(--green); } .params { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13px; color: var(--muted); padding: 12px 0; border-top: 1px solid var(--rule-2); } .params b { color: var(--ink-2); font-weight: 500; } .sig { padding: 10px 0; border-bottom: 1px solid var(--rule-2); font: 13px var(--mono); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; } .sig .fn { color: var(--ink); } .sig .fn .k { color: var(--green); } .sig .who { color: var(--muted); font-family: var(--sans); } .ex { display: grid; grid-template-columns: minmax(0, 1fr) 96px; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--rule-2); font-size: 15px; } .ex .v { text-align: right; font-variant-numeric: tabular-nums; } .ex .sub { font-size: 13px; } .ex.total { border-bottom: 3px double var(--ink); font-weight: 500; } .ex.total .v { font: 400 24px var(--serif); color: var(--green); } .stat { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); } .stat > div { padding: 18px 20px; border-left: 1px solid var(--rule); } .stat > div:first-child { border-left: 0; padding-left: 0; } .stat .v { font: 400 28px/1.1 var(--serif); } .stat .v.g { color: var(--green); } .stat .label { margin-top: 6px; } .inv { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; } .fsm svg { width: 100%; height: auto; display: block; padding: 14px 0; background: var(--paper-2); } .fsm rect { fill: var(--paper); stroke: var(--ink); } .fsm text { font: 12px var(--sans); fill: var(--ink-2); } .fsm text.t { font: 500 15px var(--serif); fill: var(--ink); } .fsm text.c { fill: var(--muted); font-size: 12px; } .fsm path { fill: none; stroke: var(--ink-2); stroke-width: 1.2; } .fsm path.hot { stroke: var(--brass); stroke-dasharray: 4 8; animation: dash 3s linear infinite; } .fsm path.bad { stroke: var(--red); stroke-dasharray: 4 8; animation: dash 3s linear infinite; } .fsm path.ok { stroke: var(--green); stroke-dasharray: 4 8; animation: dash 3s linear infinite; } @keyframes dash { to { stroke-dashoffset: -24; } } /* ------------------------------------------------------------------ agent page: lookup, wallet, owner */ .lookup { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 18px 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--rule); } .lookup label { font: italic 400 19px var(--serif); color: var(--ink); } .lookup input { flex: 1 1 260px; min-width: 0; } #wallet > header .btn, #own > header .btn { margin-left: auto; } #wallet > header .btn + .btn, #own > header .btn + .btn { margin-left: 8px; } .wstat { padding: 10px 0; font-size: 14px; color: var(--ink-2); min-height: 8px; overflow-wrap: anywhere; } .wstat.ok { color: var(--green); } .wstat.warn { color: var(--red); } .wstat.muted { color: var(--muted); } .wstat a { color: var(--green); text-decoration: underline; text-underline-offset: 3px; } /* a Google account not on the closed list (account.js notListedSay): the words, then three ways out */ .wstat.nl .nl-t { display: block; } .wstat.nl .nl-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; } .wstat.nl .nl-acts .btn { color: var(--ink); text-decoration: none; min-height: 40px; } .wstat.nl .nl-acts .btn:hover { color: var(--paper); } /* a failure's way forward, after its words (account.js failLine): Try again, or Sign in again */ .wstat .fail-act { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; } .wstat .fail-act .btn { min-height: 40px; } /* each action's own line, right under its button (journey audit 2026-10-11, B1-04 to B1-11): on an agent's card (Repay, Borrow, Close line), the transfer address, Claim fees (a backing row's with the backing screens' styles); no room taken while it is empty, and still a live region */ .ac-act-s:empty, #ac-wd-set-s:empty, .se-claim-s:empty, #st-3-s:empty { padding: 0; min-height: 0; } .ac-loans .ac-act-s { padding: 4px 0 6px; } .ac-loans .ac-act-s:empty { padding: 0; } /* a stock line's own line: inside its row, under its buttons */ .ga-row .ga-row-s { flex: 1 1 100%; padding: 0; min-height: 0; } .ga-row .ga-row-s:empty { display: none; } .acct .se-you > div.se-claim-s { grid-column: 1 / -1; display: block; padding: 0; justify-self: end; max-width: 52ch; text-align: right; } .acct .se-you > div.se-claim-s b { font: inherit; font-weight: 600; } .acct .se-you > div.se-claim-s .fail-act { justify-content: flex-end; } .acct .se-you > div.se-claim-s:empty { display: none; } @media (max-width: 640px) { .acct .se-you > div.se-claim-s { justify-self: stretch; max-width: none; text-align: left; } .acct .se-you > div.se-claim-s .fail-act { justify-content: flex-start; } } .wmine { padding: 0 0 8px; } .wmine a { text-decoration: underline; text-underline-offset: 3px; } .acts { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border-top: 1px solid var(--rule); } .act { padding: 16px 24px 10px 0; border-bottom: 1px solid var(--rule-2); } .acts > .act:nth-child(2n) { padding-left: 24px; padding-right: 0; border-left: 1px solid var(--rule-2); } .act.alt, .acts > .act.alt { grid-column: 1 / -1; padding-left: 0; padding-right: 0; border-left: 0; } .act:last-child { border-bottom: 0; } .act .t { font: 500 17px/1.35 var(--serif); color: var(--ink); margin-bottom: 10px; } .act .t b { font-weight: 500; } .act .row, .row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 6px; } .act input { flex: 1 1 130px; min-width: 0; padding: 10px 12px; font-size: 14px; } .row input.invite { flex: 1 1 260px; min-width: 200px; font: 12.5px var(--mono); } .act .btn { padding: 10px 14px; font-size: 14px; } .act .btn.busy { opacity: .6; } .act .row > .btn:first-of-type:not(:disabled) { background: var(--ink); color: var(--paper); } .act .row > .btn:first-of-type:not(:disabled):hover { background: var(--green); border-color: var(--green); } .act .wstat { padding-left: 0; padding-right: 0; } /* an app's own browser (account.js inAppNotice): a quiet note over the Google button on /account, /start and /stocks, with the page's link to copy and, on Android, Open in Chrome; its buttons are plain, the Google button stays the one that stands out */ .inapp { margin: 0 0 12px; padding: 12px 14px; border: 1px solid var(--rule); border-left: 3px solid var(--brass); background: var(--brass-soft); color: var(--ink-2); font: 400 14.5px/1.45 var(--sans); text-align: left; } .inapp[hidden] { display: none; } .acct .inapp { border-radius: 14px; border: 1px solid color-mix(in srgb, var(--brass) 40%, var(--rule)); } #ac-in .act > .inapp { margin: 0; } .inapp-t { margin: 0 0 10px; } .inapp-acts { display: flex; flex-wrap: wrap; gap: 8px; } .inapp .inapp-acts .btn { padding: 9px 14px; font-size: 14px; background: var(--field); border-color: var(--field-edge); color: var(--ink); text-decoration: none; } .inapp .inapp-acts .btn:hover { border-color: var(--ink); } .inapp .inapp-s { padding: 8px 0 0; min-height: 0; font-size: 14px; } .inapp .inapp-s:empty { display: none; } .inapp-url { display: block; margin-top: 6px; padding: 8px 10px; background: var(--field); border: 1px solid var(--field-edge); color: var(--ink); font: 400 13px/1.4 var(--mono); overflow-wrap: anywhere; user-select: all; -webkit-user-select: all; } .row .reqlink { flex-basis: 100%; color: var(--green); font-size: 14px; } #own .ownact { border: 0; padding-top: 6px; } .act-cell { width: 1px; white-space: nowrap; } .act-cell .btn.repay { padding: 6px 10px; font-size: 13px; } body:not(.owner) .act-cell { display: none; } .agentcard, .agentcard[hidden], .act[hidden], .row .reqlink[hidden] { display: none; } .steps.grid2 .code { font-size: 12.5px; } /* ------------------------------------------------------------------ seats page */ .doors { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--ink); } .doors.two { grid-template-columns: repeat(2, minmax(0, 1fr)); } .door { display: block; position: relative; padding: 26px 28px 30px 0; border-right: 1px solid var(--rule); color: var(--ink); } .door + .door { padding-left: 28px; } .door:last-child { border-right: 0; } .door .n { font: italic 400 26px/1 var(--serif); color: var(--brass); margin-bottom: 12px; } .door b { display: block; font: 400 28px/1.1 var(--serif); letter-spacing: -.01em; margin-bottom: 10px; } .door p { color: var(--ink-2); font-size: 15px; max-width: 34em; } .door .tag { display: inline-block; margin-top: 16px; font-size: 14px; font-weight: 500; color: var(--muted); border-bottom: 1px solid currentColor; } .door .tag.live { color: var(--green); } .door:hover b { color: var(--green); } .steps.three, .steps:not(.grid2) { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; } .steps.three > div { padding: 20px 24px 20px 0; border-bottom: 1px solid var(--rule-2); } .steps.three > div + div { padding-left: 24px; border-left: 1px solid var(--rule-2); } .steps.three .n { font: italic 400 22px/1 var(--serif); color: var(--brass); margin-bottom: 10px; } .steps.three b { display: block; font: 500 19px/1.25 var(--serif); margin-bottom: 6px; } .steps.three p { color: var(--ink-2); font-size: 15px; } .reqtext { margin: 10px 0 6px; padding: 14px 16px; background: var(--paper-2); white-space: pre-wrap; font: 13px/1.6 var(--mono); color: var(--ink-2); overflow-wrap: anywhere; } .request .row .sub { flex-basis: 100%; } .fallback summary { cursor: pointer; padding: 12px 0; color: var(--ink-2); font-size: 15px; list-style: none; } .fallback summary::-webkit-details-marker { display: none; } .fallback summary::before { content: "+ "; color: var(--green); } .fallback[open] summary::before { content: "− "; } .fallback > .t { padding-top: 6px; font-size: 16px; } #rq-out[hidden] { display: none; } .label.g { color: var(--green); } /* ------------------------------------------------------------------ contract address */ .ca { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "k a a" "c c x"; border: 1px solid var(--ink); background: var(--paper-2); max-width: 640px; } .ca .ca-k { grid-area: k; } .ca code { grid-area: a; } .ca #ca-copy { grid-area: c; } .ca .ca-x { grid-area: x; } .ca .ca-k, .ca .k { padding: 13px 14px; border-right: 1px solid var(--rule); font-size: 14px; color: var(--ink-2); white-space: nowrap; } .ca code { min-width: 0; padding: 14px; font: 13px/1.4 var(--mono); color: var(--ink); overflow-wrap: anywhere; user-select: all; } .ca code::-webkit-scrollbar { display: none; } .ca button, .ca #ca-copy { border: 0; border-top: 1px solid var(--ink); background: var(--ink); color: var(--paper); font: 500 14px var(--sans); padding: 13px 18px; cursor: pointer; } .ca button:hover { background: var(--green); } .ca .ca-x { display: flex; align-items: center; justify-content: center; padding: 13px 18px; border-top: 1px solid var(--ink); border-left: 1px solid var(--ink); font-size: 14px; color: var(--ink-2); white-space: nowrap; } .ca .ca-x:hover { color: var(--green); } /* ------------------------------------------------------------------ landing */ .dateline { border-bottom: 1px solid var(--rule); font-size: 13px; color: var(--muted); } .dateline .wrap { display: flex; justify-content: space-between; align-items: center; min-height: 40px; gap: 16px; max-width: 1280px; } .dateline a { color: var(--ink-2); text-decoration: underline; text-underline-offset: 4px; } .dateline a:hover { color: var(--green); } .hero .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; padding-block: 56px 64px; align-items: end; } .kicker { font-size: 15px; color: var(--green); margin: 0 0 22px; } .hero h1 { font: 400 clamp(46px, 6.2vw, 86px)/.98 var(--serif); letter-spacing: -.022em; margin: 0 0 28px; } .hero h1 em { font-style: italic; color: var(--green); } .lede { font: 400 21px/1.5 var(--serif); color: var(--ink-2); max-width: 32em; margin: 0 0 34px; } .actions { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; } .alloc-live { font: 500 14px/1.3 var(--sans); color: var(--green); } .tree { margin: 0; align-self: stretch; display: flex; flex-direction: column; } .tree canvas { width: 100%; flex: 1; min-height: 520px; display: block; cursor: grab; touch-action: pan-y; } .tree canvas:active { cursor: grabbing; } .account { border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); } .account .wrap { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); } .account .cell { padding: 28px 28px 24px; border-left: 1px solid var(--rule); min-width: 0; } .account .cell:first-child { border-left: 0; padding-left: 0; } .account .k { font-size: 14px; color: var(--muted); margin-bottom: 10px; } .account .v { font: 400 clamp(38px, 4vw, 54px)/1 var(--serif); letter-spacing: -.02em; font-variant-numeric: lining-nums tabular-nums; } .account .v.good { color: var(--green); } .account .s { font-size: 14px; color: var(--muted); margin-top: 10px; } .source { font-size: 13px; color: var(--muted); padding-top: 12px; } .source code { font-size: 12px; color: var(--ink-2); } .chapter { padding: 104px 0; } .chead { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 64px; margin-bottom: 52px; } .chead .no { font: italic 400 22px/1 var(--serif); color: var(--brass); border-top: 1px solid var(--ink); padding-top: 14px; } .chead h2 { font: 400 clamp(34px, 4vw, 52px)/1.04 var(--serif); letter-spacing: -.018em; border-top: 1px solid var(--ink); padding-top: 12px; } .chead p { font: 400 19px/1.55 var(--serif); color: var(--ink-2); margin-top: 18px; max-width: 36em; } .howto { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 64px; } .diagram { position: sticky; top: 96px; align-self: start; } .diagram svg { width: 100%; height: auto; } .diagram .box { stroke: var(--ink); fill: transparent; transition: fill .5s var(--ease), stroke .5s var(--ease); } .diagram .t1 { fill: var(--ink); font: 400 22px "EB Garamond", serif; } .diagram .t2 { fill: var(--muted); font: 400 12px "Schibsted Grotesk", sans-serif; } .diagram .lb { fill: var(--brass); font: italic 400 16px "EB Garamond", serif; transition: opacity .5s; } .diagram .ar, .diagram .hd { stroke: var(--ink); transition: stroke .5s, opacity .5s; } .diagram .g { stroke: var(--green); } .diagram .lb.g { fill: var(--green); stroke: none; } .diagram .r { stroke: var(--red); } .diagram .lb.r { fill: var(--red); stroke: none; font-size: 14px; } .diagram .loss { opacity: .28; transition: opacity .5s; } /* the walk-through: one step at a time, its money moving, its box lit */ .diagram [data-step].on .box { fill: var(--green-soft); stroke: var(--green); } .diagram [data-step].on .ar { stroke-dasharray: 5 6; animation: dash 1.1s linear infinite; } .diagram [data-step="4"].on { opacity: 1; } .howto.at-4 .diagram [data-step="1"] .box { fill: var(--red-soft); stroke: var(--red); } .howto.playing .stepl { transition: opacity .5s var(--ease); opacity: .5; cursor: pointer; } .howto.playing .stepl.on { opacity: 1; } .stepl.on .n { color: var(--green); } .stepl { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 20px; padding: 28px 0; border-top: 1px solid var(--rule); } .stepl:last-child { border-bottom: 1px solid var(--rule); } .stepl .n { font: italic 400 34px/1 var(--serif); color: var(--brass); } .stepl h3 { font: 500 25px/1.2 var(--serif); margin: 0 0 8px; } .stepl p { color: var(--ink-2); max-width: 38em; } .stepl .aside { display: block; margin-top: 10px; font-size: 15px; color: var(--muted); } .night { background: var(--night); color: var(--night-ink); } .night .chead .no { color: var(--leaf); border-color: var(--night-ink); } .night .chead h2 { border-color: var(--night-ink); } .night .chead p { color: var(--night-muted); } .night .link { color: var(--night-ink); } .night .link:hover { color: var(--leaf); } .after { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 28px; font-size: 15px; } /* the landing ledger (rows written by app.js into #log) */ .logwrap { min-width: 0; } .logwrap header { display: grid; grid-template-columns: 110px 100px minmax(0, 1.1fr) minmax(0, 1.4fr) 170px; white-space: nowrap; gap: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--night-ink); font-size: 14px; font-weight: 500; color: var(--night-muted); } .logwrap header span:last-child { text-align: right; font-weight: 400; } .log { display: grid; grid-template-columns: minmax(0, 1fr); } .log .ln { display: grid; grid-template-columns: 110px 100px minmax(0, 1.1fr) minmax(0, 1.4fr) 170px 0; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--night-rule); align-items: baseline; white-space: nowrap; overflow: hidden; font-size: 15px; } .log .ln > span { overflow: hidden; text-overflow: ellipsis; } .log .ln .blk { font: 13px var(--mono); color: var(--night-muted); } .log .ln .kind { font: 400 18px/1.2 var(--serif); color: var(--night-ink); } .log .ln .amt { text-align: right; font-variant-numeric: tabular-nums; } .log .ln .tx { display: none; } .log .ln .who2 { color: var(--night-muted); } .log .ln.repaid .kind, .log .ln.claimed .kind, .log .ln.repaid .amt { color: var(--leaf); } .log .ln.vouched .kind, .log .ln.root .kind { color: #d6b36c; } .log .ln.defaulted .kind, .log .ln.defaulted .amt, .log .ln.slashed .kind { color: #e08a6f; } @keyframes lnIn { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } } .log .ln.new { animation: lnIn 1.4s ease-out both; } .ways { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--ink); } .way { padding: 34px 32px 38px 0; border-right: 1px solid var(--rule); } .way + .way { padding-left: 32px; } .way:last-child { border-right: 0; } .way .who { font-size: 14px; color: var(--muted); } .way h3 { font: 400 32px/1.08 var(--serif); letter-spacing: -.012em; margin: 10px 0 14px; } .way p { color: var(--ink-2); margin-bottom: 22px; } .way ul { margin: 0 0 24px; padding: 0; list-style: none; font-size: 15px; } .way li { padding: 8px 0; border-top: 1px dotted var(--rule); color: var(--ink-2); } .way li b { font-weight: 500; color: var(--ink); } /* a quieter second way under a door's button (index.html: from your own wallet) */ .way .link.sm { display: block; width: fit-content; margin-top: 14px; font-size: 14px; color: var(--muted); } .way .link.sm:hover { color: var(--ink); } .token .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: start; } .token .wrap > * { min-width: 0; } .token h2 { font: 400 clamp(32px, 3.6vw, 46px)/1.06 var(--serif); letter-spacing: -.016em; margin-bottom: 18px; } .token p { font: 400 19px/1.55 var(--serif); color: var(--ink-2); margin-bottom: 26px; } .terms2 { border-top: 1px solid var(--ink); } .terms2 div { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 20px; padding: 18px 0; border-bottom: 1px solid var(--rule); } .terms2 span { font-size: 14px; color: var(--muted); } .terms2 b { font: 400 22px/1.3 var(--serif); } /* protocol page sections */ section.sec { padding-block: 72px; border-top: 1px solid var(--ink); } section.sec:first-of-type { border-top: 0; } .sec .head { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 64px; align-items: baseline; margin-bottom: 36px; } .sec .head .no { font: italic 400 22px/1 var(--serif); color: var(--brass); } .sec .head h2 { font: 400 clamp(30px, 3.4vw, 44px)/1.08 var(--serif); letter-spacing: -.016em; } .sec .head p { margin-top: 12px; font: 400 18px/1.55 var(--serif); color: var(--ink-2); max-width: 40em; } .sec pre.code { font-size: 11.5px; line-height: 1.8; padding: 16px 16px; } .sec .grid2 { gap: 28px; } .app-main .sec > .wrap { padding-inline: 0; max-width: none; } /* ------------------------------------------------------------------ colophon */ footer.foot { border-top: 1px solid var(--ink); padding: 42px 0 60px; font-size: 14px; color: var(--muted); } footer.foot .wrap { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); gap: 40px; max-width: 1280px; } footer.foot .brand span { font-size: 22px; color: var(--ink); } footer.foot p { margin-top: 12px; max-width: 30em; } footer.foot h4 { margin: 0 0 12px; font: 500 14px var(--sans); color: var(--ink); } footer.foot a { display: block; padding: 3px 0; } footer.foot a:hover { color: var(--ink); text-decoration: underline; } footer.foot #foot-chain { display: block; margin-top: 10px; font-size: 13px; } /* ------------------------------------------------------------------ skeletons: nothing but the truth */ @keyframes skShimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } } .sk { color: transparent !important; background: linear-gradient(90deg, var(--paper-2) 25%, var(--paper-3) 50%, var(--paper-2) 75%); background-size: 200% 100%; animation: skShimmer 1.5s linear infinite; display: inline-block; min-width: 3.4em; vertical-align: middle; } .night .sk { background: linear-gradient(90deg, var(--night-2) 25%, var(--night-rule) 50%, var(--night-2) 75%); background-size: 200% 100%; } .sk > * { visibility: hidden; } .sk.wide { min-width: min(100%, 24em); } tbody.sk-rows td { padding-top: 12px; padding-bottom: 12px; } tbody.sk-rows .sk { min-width: 100%; height: 1em; } /* ------------------------------------------------------------------ motion */ .reveal { opacity: 1; transform: none; } @keyframes arrive { from { opacity: .3; transform: translateY(12px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: no-preference) { .arrived { animation: arrive .6s var(--ease) var(--arrival-delay, 0ms) backwards; } } .motion-off *, .motion-off *::before, .motion-off *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } } /* ------------------------------------------------------------------ small screens */ @media (max-width: 1000px) { .split, .grid2, .grid3, .howto, .chead, .sec .head, .token .wrap, .board-heading { grid-template-columns: minmax(0, 1fr); gap: 24px; } .board-heading .aside { text-align: left; } .diagram { position: static; max-width: 320px; } .ways, .doors, .doors.two, .steps.three, .steps:not(.grid2) { grid-template-columns: minmax(0, 1fr); } .way, .way + .way, .door, .door + .door { padding: 26px 0; border-right: 0; border-bottom: 1px solid var(--rule); } .steps.three > div + div { padding-left: 0; border-left: 0; } .logwrap header { grid-template-columns: 90px minmax(0, 1fr) auto; } .logwrap header span:nth-child(3), .logwrap header span:nth-child(4) { display: none; } .log .ln { grid-template-columns: 90px minmax(0, 1fr) 90px 0; } .log .ln .who2, .log .ln > span:nth-child(3) { display: none; } } /* the header's links, status and buttons outgrow the row below ~1500px (signed in, the account corner is the widest thing in it): the status keeps its bonsai and drops its block text, then the gaps close up, the x402 button drops its "new" mark, and from 1120px the links and buttons take the compact sizes. The page never scrolls sideways at any width (checked at 1024, 1280 and 1440, signed in and out). */ @media (max-width: 1500px) { .status #status-text { display: none; } } @media (max-width: 1360px) { .nav .wrap { gap: 24px; } .links { gap: 16px; } .nav .right { gap: 12px; } .x402btn .mk { display: none; } } @media (max-width: 1120px) { .nav .wrap { gap: 18px; } .links { gap: 13px; font-size: 14px; } .nav .right { gap: 10px; } .nav .right .btn.sm { padding: 8px 11px; font-size: 13.5px; } .me-btn { gap: 8px; padding-right: 10px; } .me-bal > span { display: none; } } /* the timelock's delay (build-site.mjs SITE_TIMELOCK_DELAY): web/ shows the 48h words; a build keeps one version, unmarked */ [data-timelock="0"] { display: none !important; } /* a build ships either the links marked data-no-onboarding or the ones marked data-onboarding, never both (scripts/build-site.mjs); the unbuilt web/ folder has both, so it shows the onboarding ones, as the live site does */ :has(> [data-onboarding]) > [data-no-onboarding] { display: none; } @media (max-width: 900px) { .wrap { padding-inline: 20px; } .nav .wrap { gap: 16px; height: 60px; } .links { gap: 14px; font-size: 14px; } .brand span { font-size: 22px; } .status #status-text { display: none; } .agentbtn { display: none; } .x402btn { padding: 8px 10px; } .dateline .wrap > span:first-child { display: none; } .hero .wrap { grid-template-columns: minmax(0, 1fr); gap: 36px; padding-block: 40px 52px; } .lede { font-size: 19px; } .tree canvas { min-height: 380px; } .account .wrap, .kpis, .stat { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .account .cell, .kpi, .stat > div { padding: 20px 14px 18px; } .account .cell:nth-child(odd), .kpi:nth-child(odd), .stat > div:nth-child(odd) { border-left: 0; padding-left: 0; } .account .cell:nth-child(n+3), .kpi:nth-child(n+3), .stat > div:nth-child(n+3) { border-top: 1px solid var(--rule); } .chapter { padding: 72px 0; } .acts { grid-template-columns: minmax(0, 1fr); } .act, .acts > .act:nth-child(2n) { padding-left: 0; padding-right: 0; border-left: 0; } .def { grid-template-columns: minmax(0, 1fr); gap: 4px; } .terms2 div { grid-template-columns: minmax(0, 1fr); gap: 4px; } .ca { grid-template-areas: "k a a" "c c x"; } .ca code { font-size: 12px; padding: 12px; } .ca .ca-k { padding: 12px 10px; font-size: 13px; } footer.foot .wrap { grid-template-columns: minmax(0, 1fr); } .grove { height: 440px; } .lbtools input { margin-left: 0; width: 100%; } } /* phones: every field gets the full row so its placeholder reads whole; buttons share the row below */ @media (max-width: 620px) { .act input, .row input.invite { flex: 1 1 100%; min-width: 0; } .act .row > .btn { flex: 1 1 auto; } } /* display settings: a gear in the top bar, one switch behind it */ .prefs { position: relative; display: flex; } .prefs-btn { width: 34px; height: 34px; display: grid; place-items: center; background: transparent; border: 1px solid var(--rule); color: var(--ink-2); cursor: pointer; padding: 0; } .prefs-btn:hover, .prefs-btn[aria-expanded="true"] { border-color: var(--ink); color: var(--ink); } .prefs-btn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .prefs-pop { position: absolute; top: calc(100% + 10px); right: 0; z-index: 40; min-width: 210px; background: var(--paper); border: 1px solid var(--ink); box-shadow: 0 10px 30px var(--shade); padding: 6px 0; } .prefs-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 10px 14px; font: 500 14px var(--sans); color: var(--ink); cursor: pointer; } .switch { position: relative; width: 38px; height: 22px; border-radius: 11px; border: 1px solid var(--field-edge); background: var(--paper-3); padding: 0; cursor: pointer; transition: background .2s, border-color .2s; flex: none; } .switch i { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--ink-2); transition: transform .2s var(--ease), background .2s; } .switch[aria-checked="true"] { background: var(--green); border-color: var(--green); } .switch[aria-checked="true"] i { transform: translateX(16px); background: var(--paper); } .switch:focus-visible, .prefs-btn:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; } @media (max-width: 560px) { .links a[href*="github.com"] { display: none; } .nav .wrap { gap: 12px; } .links { gap: 12px; } /* the section links scroll sideways in their own strip rather than push the settings gear off the screen */ .nav .links { flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; /* soft edges, so a link cut by the strip reads as "scroll for more", not as a clipped word */ -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%); padding-inline: 6px; } .nav .links::-webkit-scrollbar { display: none; } .nav .links a { flex: none; } .nav .right { gap: 10px; } .x402btn { padding: 7px 9px; font-size: 13px; } .x402btn .mk { display: none; } .prefs-btn { width: 30px; height: 30px; } .gobtn { padding: 7px 10px 7px 9px; font-size: 13px; gap: 6px; } .nav .wrap:has(.gobtn) .links { margin-inline: -6px; } /* the strip's soft edge sits outside the text's line */ } /* with the Go mode button, below 880px the top row is the logo and the buttons; the section links take a second row of their own, the full width (under 560px the strip that scrolls sideways, above), and the status dot goes (the dateline and the pages still say where the figures come from) */ @media (max-width: 880px) { .nav .wrap:has(.gobtn) { flex-wrap: wrap; height: auto; row-gap: 0; padding-top: 10px; } .nav .wrap:has(.gobtn) .links { order: 3; flex: 1 1 100%; min-width: 0; padding-block: 6px 10px; } .nav .wrap:has(.gobtn) .status { display: none; } body:has(.nav .gobtn) section[id] { scroll-margin-top: 120px; } } /* the ownership proof on /invite?prove=… */ body.proving .doors, body.proving #request, body.proving #usdg { display: none; } .pv-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; padding: 22px 0 8px; align-items: start; } .pv-row { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--rule-2); } .pv-row .n { width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid var(--ink); font: italic 400 18px/1 var(--serif); color: var(--ink); } .pv-row.done .n { background: var(--green); border-color: var(--green); color: var(--paper); font-style: normal; } .pv-row.done .n::after { content: "✓"; font: 500 15px var(--sans); } .pv-row.done .n { font-size: 0; } .pv-row b { font: 500 18px/1.3 var(--serif); } .pv-row p { margin-top: 4px; font-size: 14px; color: var(--muted); } .pv-msg { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 12.5px; line-height: 1.7; } .pv-done { border-top: 0; padding-top: 6px; } .prove.dead .pv-grid { display: none; } .prove.dead .sub { display: none; } .prove.dead .pv-done .sub { display: inline; } @media (max-width: 760px) { .pv-grid { grid-template-columns: minmax(0, 1fr); } .pv-row { grid-template-columns: 30px minmax(0, 1fr); } .pv-row .btn { grid-column: 1 / -1; } } /* the 3D grove: corner controls, a pinned record card, clickable table rows */ .grove-ctl { position: absolute; right: 14px; bottom: 14px; z-index: 3; display: flex; flex-direction: column; border: 1px solid var(--night-rule); background: var(--night-2); } .grove-ctl button { width: 36px; height: 36px; border: 0; background: transparent; color: var(--night-ink); font: 400 20px/1 var(--sans); cursor: pointer; } .grove-ctl button + button { border-top: 1px solid var(--night-rule); } .grove-ctl button:hover { background: var(--night); color: var(--leaf); } .grove-ctl button:focus-visible { outline: 2px solid var(--leaf); outline-offset: -2px; } .grove .tip.pinned { pointer-events: auto; padding: 12px 34px 12px 14px; } .grove .tip .go { display: inline-block; margin-top: 8px; color: var(--leaf); text-decoration: underline; text-underline-offset: 3px; } .grove .tip .x { position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; border: 0; background: transparent; color: var(--night-muted); font-size: 18px; cursor: pointer; } .grove .tip .x:hover { color: var(--night-ink); } .grove canvas.three { cursor: grab; } .grove canvas.three:active { cursor: grabbing; } #lb-body tr[data-id] { cursor: pointer; } /* use a line (web/use.html): the small notes under a box */ .sec .note { margin-top: 14px; font-size: 14px; line-height: 1.5; color: var(--muted); } .sec .note a { text-decoration: underline; text-underline-offset: 3px; } .sec .stack { margin-top: 28px; } /* participate: two plain cards, facts with hints, seat terms as four tiles, short answers below */ .pt-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; padding: 22px 0 8px; } .pt-card { border-top: 1px solid var(--rule); padding-top: 18px; min-width: 0; display: flex; flex-direction: column; } .pt-kicker { font-size: 13px; color: var(--muted); margin-bottom: 6px; } .pt-card h3 { font: 400 30px/1.1 var(--serif); letter-spacing: -.01em; } .pt-lede { margin: 8px 0 14px; font: 400 18px/1.45 var(--serif); color: var(--ink-2); max-width: 30em; } .pt-facts { list-style: none; margin: 0 0 16px; padding: 0; border-top: 1px solid var(--rule-2); } .pt-facts li { display: grid; grid-template-columns: 150px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--rule-2); font-size: 15px; } .pt-facts li span { color: var(--muted); } .pt-facts li b { font-weight: 500; color: var(--ink); } .pt-tip { position: relative; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--muted); background: transparent; color: var(--muted); font: 500 12px/1 var(--sans); cursor: help; padding: 0; } .pt-tip:hover, .pt-tip:focus-visible { color: var(--ink); border-color: var(--ink); } .pt-tip::after { content: attr(data-tip); position: absolute; right: -6px; bottom: calc(100% + 10px); box-sizing: border-box; width: min(300px, calc(100vw - 32px)); padding: 12px 14px; background: var(--ink); color: var(--paper); font: 400 14px/1.45 var(--sans); text-align: left; opacity: 0; transform: translateY(4px); pointer-events: none; transition: opacity .18s var(--ease), transform .18s var(--ease); z-index: 20; box-shadow: 0 10px 30px var(--shade); } .pt-tip:hover::after, .pt-tip:focus::after, .pt-tip.open::after { opacity: 1; transform: none; } .pt-tip.shut::after { opacity: 0 !important; } .vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* an address, short until asked for (addr.js): 0xAa85…0902 [Show] */ .addr { display: inline; } .addr-v[data-shown] { overflow-wrap: anywhere; word-break: break-all; } /* (also where a box styles every button in it: the token's address box, the Go app's account menu) */ .addr-tog, .ca .addr-tog, .ga-me-menu .addr-tog { position: relative; display: inline-block; width: auto; margin: 0 0 0 6px; padding: 1px 7px; border: 1px solid var(--rule); border-radius: 999px; background: none; color: var(--muted); font: 500 11px/1.4 var(--sans); letter-spacing: 0; text-align: center; text-transform: none; vertical-align: middle; white-space: nowrap; cursor: pointer; user-select: none; -webkit-user-select: none; flex: none; align-self: center; } .addr-tog:hover, .addr-tog:focus-visible, .ca .addr-tog:hover, .ga-me-menu .addr-tog:hover { color: var(--ink); border-color: var(--ink); background: none; } .pt-card .row { margin-top: auto; } .pt-card input { flex: 1 1 160px; min-width: 0; padding: 12px 14px; font-size: 15px; } .pt-card .btn.busy, .pt-feerow .btn.busy { opacity: .6; } .pt-card .wstat { padding-left: 0; padding-right: 0; } .pt-kv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--rule-2); border: 1px solid var(--rule-2); margin: 2px 0 10px; } .pt-kv > div { background: var(--paper); padding: 12px 14px; display: flex; flex-direction: column; gap: 3px; } .pt-kv span { font-size: 13px; color: var(--muted); } .pt-kv b { font: 500 19px/1.2 var(--serif); color: var(--ink); } .pt-kv i { font-style: normal; font-size: 13px; color: var(--muted); } .pt-seats { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--muted); flex-wrap: wrap; } .pt-meter { display: inline-block; width: 90px; height: 6px; background: var(--rule-2); position: relative; } .pt-meter i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--green); } #pt-terms { padding-top: 0; } .pt-steps { margin: 6px 0 16px; padding: 0; list-style: none; counter-reset: s; display: grid; gap: 8px; } .pt-steps li { counter-increment: s; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; align-items: baseline; font-size: 15px; color: var(--ink-2); } .pt-steps li::before { content: counter(s); width: 24px; height: 24px; border: 1px solid var(--green); color: var(--green); border-radius: 50%; display: grid; place-items: center; font: 500 12.5px/1 var(--sans); } .pt-steps b { font-weight: 500; color: var(--ink); } .pt-more { display: flex; gap: 18px; margin-top: 10px; } .pt-link { background: none; border: 0; padding: 0; color: var(--muted); font: 400 14px var(--sans); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; } .pt-link:hover { color: var(--ink); } .pt-link:disabled { opacity: .5; cursor: not-allowed; } .pt-feerow { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; padding: 16px 0; border-top: 1px solid var(--rule); margin-top: 18px; } .pt-feelabel { font: 400 19px/1.2 var(--serif); } .pt-feerow .wstat { padding: 0; } .pt-faq details { border-bottom: 1px solid var(--rule-2); } .pt-faq summary { cursor: pointer; list-style: none; padding: 16px 0; font: 400 19px/1.3 var(--serif); display: flex; justify-content: space-between; gap: 16px; } .pt-faq summary::-webkit-details-marker { display: none; } .pt-faq summary::after { content: "+"; color: var(--muted); font: 400 20px/1 var(--sans); transition: transform .2s var(--ease); } .pt-faq details[open] summary::after { transform: rotate(45deg); } .pt-faq details p { margin: 0 0 18px; max-width: 46em; color: var(--ink-2); font-size: 15.5px; line-height: 1.6; } @media (max-width: 860px) { .pt-two { grid-template-columns: minmax(0, 1fr); gap: 28px; } .pt-facts li { grid-template-columns: minmax(0, 1fr) auto; } .pt-facts li span { grid-column: 1 / -1; font-size: 13px; margin-bottom: -6px; } .pt-tip::after { right: 0; } .pt-card .row > .btn { flex: 1 1 auto; } } /* seats: a "best for" line on each door; the bond hint sits in the panel header */ .door .best { display: block; margin-top: 10px; font-size: 13.5px; color: var(--green); } .panel > header .pt-tip { margin-left: 4px; } .panel > p.pad { margin: 0; padding: 12px 0 16px; } .v2why { display: block; margin-top: 3px; font-size: 13px; line-height: 1.4; color: var(--muted); } #p-v2 table.score-table { min-width: 0; } #p-v2 td.num { white-space: nowrap; vertical-align: top; } /* footer: the X account, with its mark */ footer.foot a.xlink { display: flex; align-items: center; gap: 8px; } footer.foot a.xlink svg { width: 14px; height: 14px; flex: none; } /* the dev log (web/updates.html, web/devlog.js): releases by day, each with a "details" list */ .dl-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 12px 0; border-top: 1px solid var(--ink); } .dl-bar[hidden], .dl-day[hidden] { display: none; } .dl-filters { display: flex; gap: 6px; flex-wrap: wrap; } .dl-filters button, .dl-all { font: 500 12.5px/1 var(--mono); letter-spacing: .04em; padding: 7px 10px; background: transparent; border: 1px solid var(--rule); color: var(--muted); cursor: pointer; } .dl-filters button:hover, .dl-all:hover { border-color: var(--ink); color: var(--ink); } .dl-filters button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); } .dl-log { border-top: 1px solid var(--ink); } .dl-bar:not([hidden]) + .dl-log { border-top-color: var(--rule); } .dl-day { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 0 28px; border-bottom: 1px solid var(--rule); } .dl-day > time { position: relative; padding: 20px 0 0 18px; font: 500 14px/1.4 var(--mono); color: var(--ink-2); } .dl-day > time::before { content: ""; position: absolute; left: 0; top: 25px; width: 8px; height: 8px; background: var(--green); } .dl-item { padding: 18px 0 16px; border-bottom: 1px solid var(--rule-2); } .dl-entries > .dl-item:last-child { border-bottom: 0; } .dl-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .dl-tag { font: 500 11.5px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--green); border: 1px solid var(--rule); padding: 4px 7px; } .dl-ver { font: 400 12.5px/1 var(--mono); color: var(--ink-2); background: var(--paper-2); padding: 5px 7px; } .dl-item h3 { font: 400 23px/1.25 var(--serif); letter-spacing: -.005em; margin: 9px 0 6px; } .dl-item p { margin: 0; max-width: 46em; color: var(--ink-2); font-size: 15.5px; line-height: 1.6; } .dl-item p code { font-size: .88em; background: var(--paper-2); padding: 1px 4px; overflow-wrap: anywhere; } .dl-list code { font-size: .88em; background: var(--paper-3); padding: 1px 4px; overflow-wrap: anywhere; } .dl-item details { margin-top: 10px; } .dl-item summary { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; list-style: none; font: 500 13px/1 var(--mono); color: var(--green); padding: 6px 0; } .dl-item summary::-webkit-details-marker { display: none; } .dl-item summary::before { content: "+"; display: inline-grid; place-items: center; width: 16px; height: 16px; border: 1px solid currentColor; font-size: 13px; line-height: 1; } .dl-item details[open] > summary::before { content: "\2212"; } .dl-item summary:hover { color: var(--ink); } .dl-list { list-style: none; margin: 8px 0 4px; padding: 12px 14px; border-left: 2px solid var(--green); background: var(--paper-2); display: grid; gap: 9px; font-size: 14.5px; line-height: 1.55; color: var(--ink-2); max-width: 52em; } .dl-list li { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 12px; align-items: baseline; } .dl-k { font: 500 10.5px/1.5 var(--mono); letter-spacing: .06em; text-transform: uppercase; text-align: center; padding: 1px 0; border: 1px solid; } .dl-k.new { color: var(--green); } .dl-k.fix { color: var(--brass); } .dl-k.chg { color: var(--ink-2); } .dl-k.sec { color: var(--red); } .dl-k.ref { color: var(--muted); } .dl-list a.dl-a { font-family: var(--mono); font-size: .92em; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; overflow-wrap: anywhere; } .dl-list a.dl-a:hover { color: var(--green); } .dl-empty { padding: 24px 0; color: var(--muted); } @media (max-width: 720px) { .dl-day { grid-template-columns: minmax(0, 1fr); } .dl-day > time { padding: 18px 0 0 18px; } .dl-list li { grid-template-columns: minmax(0, 1fr); gap: 4px; } .dl-k { justify-self: start; padding: 1px 6px; } } /* the Protocol menu in the top bar: Protocol and its dev log, on hover or keyboard focus (web/nav.js: tap, Esc) */ .dd { position: relative; display: inline-flex; } .dd-top::after { content: ""; position: absolute; left: -16px; right: -16px; top: 100%; height: 26px; } /* the pointer's path to the menu keeps it open */ .dd-caret { display: inline-block; width: 6px; height: 6px; margin-left: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-3px) rotate(45deg); transition: transform .2s var(--ease); } .dd:hover .dd-caret, .dd:focus-within .dd-caret, .dd.open .dd-caret { transform: translateY(0) rotate(225deg); } .dd-menu { position: absolute; top: calc(100% + 18px); left: -18px; z-index: 40; min-width: 270px; padding: 6px 0; background: var(--paper); border: 1px solid var(--ink); box-shadow: 0 10px 30px var(--shade); opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .16s var(--ease), transform .16s var(--ease), visibility 0s linear .16s; } .dd:hover .dd-menu, .dd:focus-within .dd-menu, .dd.open .dd-menu { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; } .dd.shut .dd-menu { opacity: 0; visibility: hidden; } .links .dd-menu a, .links .dd-menu a.on { display: block; padding: 11px 16px 12px; border-bottom: 0; color: var(--ink); white-space: nowrap; } .links .dd-menu a + a { border-top: 1px solid var(--rule-2); } .dd-menu a b { display: block; font: 500 15px/1.3 var(--sans); } .dd-menu a span { display: block; margin-top: 3px; font-size: 13px; color: var(--muted); } .links .dd-menu a:hover, .links .dd-menu a:focus-visible { background: var(--paper-2); } .dd-menu a[aria-current="page"] b { color: var(--green); } .dd-menu a[aria-current="page"] b::after { content: " · you are here"; font: 400 12px var(--mono); color: var(--muted); } @media (max-width: 560px) { /* phones: the section links scroll in one strip, so Protocol and Dev log sit in it side by side */ .dd, .links .dd-menu { display: contents; visibility: visible; } .dd-top { display: none; } .links .dd-menu a, .links .dd-menu a + a, .links .dd-menu a.on { display: inline; padding: 4px 0; border: 0; border-bottom: 1px solid transparent; color: var(--ink-2); background: none; } .links .dd-menu a.on { color: var(--ink); border-bottom-color: var(--ink); } .dd-menu a b { display: inline; font: inherit; color: inherit; } .dd-menu a[aria-current="page"] b { color: inherit; } .dd-menu a b::after, .dd-menu a[aria-current="page"] b::after { content: none; } .dd-menu a span { display: none; } } /* /agent: "your agent" (web/agent.html #launch) — a hero with how a line grows, the 4-step path, three action cards */ .ag-hero { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 48px; align-items: center; padding: 18px 0 30px; } .ag-hero h1 { font: 400 clamp(38px, 5vw, 62px)/1.02 var(--serif); letter-spacing: -.02em; } .ag-hero h1 em { font-style: italic; color: var(--green); } .ag-hero p { margin-top: 16px; max-width: 34em; font: 400 19px/1.55 var(--serif); color: var(--ink-2); } .ag-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px; } .ag-level { border: 1px solid var(--ink); background: var(--paper); box-shadow: 8px 8px 0 var(--green-soft); padding: 20px 22px; } .ag-level-top { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--rule-2); } .ag-level-top b { display: block; font: 500 16px var(--mono); } .ag-level-top span { font-size: 13px; color: var(--muted); } .ag-bot { width: 34px; height: 34px; background: var(--ink); display: flex; align-items: center; justify-content: center; gap: 6px; flex: none; } .ag-bot i { width: 6px; height: 6px; background: var(--green-2); } @media (prefers-reduced-motion: no-preference) { .ag-bot i { animation: ag-blink 4.5s infinite; } } @keyframes ag-blink { 0%, 92%, 100% { transform: none; } 95% { transform: scaleY(.15); } } .ag-ladder { list-style: none; margin: 14px 0; padding: 0; display: grid; gap: 10px; } .ag-ladder li { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; align-items: center; font-size: 14.5px; color: var(--ink-2); } .ag-amt { font: 500 17px/1 var(--mono); text-align: center; padding: 9px 0; border: 1px solid var(--rule); color: var(--muted); } .ag-ladder li.on .ag-amt { background: var(--green); border-color: var(--green); color: var(--paper); } .ag-scorebar { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; font: 400 12.5px var(--mono); color: var(--muted); padding-top: 12px; border-top: 1px solid var(--rule-2); } .ag-bar { height: 8px; background: var(--rule-2); position: relative; overflow: hidden; } .ag-bar i { position: absolute; inset: 0 auto 0 0; width: 34%; background: linear-gradient(90deg, var(--green), var(--green-2)); } @media (prefers-reduced-motion: no-preference) { .ag-bar i { animation: ag-grow 6s var(--ease) infinite; } } @keyframes ag-grow { 0% { width: 4%; } 70%, 100% { width: 62%; } } .ag-note { margin: 12px 0 0; font-size: 13px; color: var(--muted); line-height: 1.5; } .ag-journey { list-style: none; margin: 0 0 26px; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--rule); } .ag-journey li + li { border-left: 1px solid var(--rule); } .ag-journey a { display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: 10px; padding: 14px 16px; color: var(--ink); height: 100%; box-sizing: border-box; } .ag-journey a:hover { background: var(--paper-2); } .ag-journey .ag-n { grid-row: span 2; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--green); color: var(--green); display: grid; place-items: center; font: 500 13px/1 var(--sans); } .ag-journey b { font-weight: 500; font-size: 15.5px; } .ag-journey a > span:last-child { font-size: 13px; color: var(--muted); } .ag-journey li.done .ag-n { background: var(--green); color: var(--paper); font-size: 0; } .ag-journey li.done .ag-n::after { content: "✓"; font-size: 13px; } .ag-journey li.next { background: var(--green-soft); } .ag-journey li.next b::after { content: " · next"; font: 400 12px var(--mono); color: var(--green); } .ag-three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; padding: 22px 0 8px; } .ag-three .pt-facts li { grid-template-columns: 96px minmax(0, 1fr) auto; } .ag-three .row { margin-top: 10px; flex-wrap: wrap; } .ag-three .pt-card .row:first-of-type { margin-top: auto; } .ag-three input { flex: 1 1 90px; } .ag-sub { margin: 16px 0 0; font-size: 13.5px; color: var(--muted); } .ag-adv { margin: 18px 0 4px; border-top: 1px solid var(--rule-2); padding-top: 12px; } .ag-adv summary { cursor: pointer; font-size: 14.5px; color: var(--ink-2); } .ag-adv summary:hover { color: var(--ink); } .ag-uses { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; padding: 20px 0 6px; } .ag-use { border-top: 1px solid var(--rule); padding-top: 16px; } .ag-ico { width: 38px; height: 38px; border: 1px solid var(--ink); display: grid; place-items: center; font: 500 18px var(--mono); margin-bottom: 12px; } .ag-use h3 { font: 400 23px/1.2 var(--serif); margin: 0 0 6px; } .ag-use p { margin: 0 0 10px; color: var(--ink-2); font-size: 15px; line-height: 1.55; } .ag-copy { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 16px; padding: 12px 14px; background: var(--paper-2); font-size: 14px; color: var(--muted); } .ag-copy code { flex: 1 1 320px; min-width: 0; font-size: 13px; color: var(--ink); overflow-wrap: anywhere; } @media (max-width: 1000px) { .ag-hero { grid-template-columns: minmax(0, 1fr); gap: 28px; } .ag-level { max-width: 460px; } .ag-three, .ag-uses { grid-template-columns: minmax(0, 1fr); gap: 22px; } } @media (max-width: 720px) { .ag-journey { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .ag-journey li:nth-child(3) { border-left: 0; } .ag-journey li:nth-child(n+3) { border-top: 1px solid var(--rule); } } /* /agent lookup: a list of agents under the field (web/agent.js) */ .ag-combo { position: relative; flex: 1 1 260px; min-width: 0; display: flex; } .ag-combo input { flex: 1 1 auto; min-width: 0; } .ag-suggest { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 25; list-style: none; margin: 0; padding: 4px 0; background: var(--paper); border: 1px solid var(--ink); box-shadow: 0 10px 30px var(--shade); max-height: 340px; overflow-y: auto; } .ag-suggest li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 10px 14px; cursor: pointer; font-size: 15px; } .ag-suggest li + li { border-top: 1px solid var(--rule-2); } .ag-suggest li[aria-selected="true"], .ag-suggest li[data-id]:hover { background: var(--paper-2); } .ag-suggest .lk-name i { font-style: normal; font-family: var(--mono); font-size: 13px; color: var(--muted); } .ag-suggest .lk-meta { font-size: 13px; color: var(--muted); white-space: nowrap; } .ag-suggest .lk-none { cursor: default; color: var(--muted); font-size: 14px; } /* /start and /stocks: the Priors account pages (web/start.js, web/stocks.js) */ .rigbar { padding: 12px 16px; background: var(--brass-soft); border-left: 3px solid var(--brass); font-size: 14.5px; color: var(--ink-2); } .st-step > header h2 { display: flex; align-items: baseline; gap: 12px; } .st-n { display: inline-grid; place-items: center; width: 30px; height: 30px; border: 1px solid var(--ink); font: italic 400 18px/1 var(--serif); transform: translateY(-3px); } .st-step.done .st-n { background: var(--green); border-color: var(--green); color: var(--paper); } .st-step[aria-disabled="true"] .acts, .st-step[aria-disabled="true"] > .act { opacity: .55; } .st-p { margin: 0 0 12px; font-size: 14.5px; color: var(--ink-2); max-width: 44em; } .st-addr { flex: 1 1 320px; min-width: 0; padding: 10px 12px; background: var(--paper-2); font: 13px var(--mono); color: var(--ink); overflow-wrap: anywhere; user-select: all; } .st-key { letter-spacing: .02em; } .st-own { margin: 4px 0 10px; font-size: 14px; } .st-auto { display: flex; gap: 10px; align-items: flex-start; margin: 6px 0 10px; cursor: pointer; font-size: 14px; } .st-auto input { margin-top: 3px; accent-color: var(--green); } .st-auto > span { display: grid; gap: 2px; } .st-auto b { font-weight: 500; } /* Start's choice of how a new agent starts (start.js paintPick), while the seat vault seats new agents */ .st-pick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0 0 12px; border: 0; padding: 0; } .st-pick > .label { grid-column: 1 / -1; } .st-opt { display: flex; gap: 10px; align-items: flex-start; padding: 14px 16px; border: 1px solid var(--rule-2); border-radius: 14px; cursor: pointer; font-size: 14px; background: var(--card-2, transparent); } .st-opt:has(input:checked) { border-color: var(--green); box-shadow: inset 0 0 0 1px var(--green); } .st-opt:has(input:disabled) { cursor: default; opacity: .6; } .st-opt input { margin-top: 3px; accent-color: var(--green); flex: none; } .st-opt > span { display: grid; gap: 4px; min-width: 0; } .st-opt b { font-weight: 500; color: var(--ink); } .st-seat { margin: 0 0 12px; display: grid; gap: 6px; } .st-seat-figs { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 0; } .st-seat-figs > div { display: grid; gap: 2px; } .st-seat-figs dt { font-size: 12.5px; color: var(--muted); } .st-seat-figs dd { margin: 0; font: 500 15px var(--mono); color: var(--ink); } .st-seat p { margin: 0; } .st-seat .st-seat-warn { color: var(--red); } .st-steps.one { grid-template-columns: minmax(0, 1fr); } @media (max-width: 760px) { .st-pick { grid-template-columns: minmax(0, 1fr); } } .st-own summary { cursor: pointer; color: var(--muted); padding: 4px 0; } .st-own .row { margin-top: 8px; } .st-own .row input { font: 13px var(--mono); } .st-steps { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--rule-2); counter-reset: st; } .st-steps li { counter-increment: st; padding: 12px 16px 12px 0; font-size: 14.5px; color: var(--muted); display: flex; gap: 10px; align-items: baseline; } .st-steps li + li { padding-left: 16px; border-left: 1px solid var(--rule-2); } .st-steps li::before { content: counter(st); font: italic 400 17px/1 var(--serif); color: var(--faint); } .st-steps li.on { color: var(--ink); } .st-steps li.on::before { content: "…"; color: var(--brass); font-style: normal; } .st-steps li.done { color: var(--green); } .st-steps li.done::before { content: "✓"; color: var(--green); font: 500 14px var(--sans); } .st-steps li.fail { color: var(--red); } .st-steps li.fail::before { content: "×"; color: var(--red); font: 500 15px var(--sans); } .st-done { border-top: 1px solid var(--rule); padding-top: 18px; } .st-done .t { font-size: 22px; } .st-done code { font: 13px var(--mono); overflow-wrap: anywhere; } @media (max-width: 760px) { .st-steps { grid-template-columns: minmax(0, 1fr); } .st-steps li + li { padding-left: 0; border-left: 0; border-top: 1px solid var(--rule-2); } } .sk-check { display: flex; gap: 12px; align-items: flex-start; padding: 0 0 18px; font-size: 15px; color: var(--ink); cursor: pointer; max-width: 52em; } .sk-check input { margin-top: 4px; width: 17px; height: 17px; accent-color: var(--green); flex: none; } .sk-elig { border-top-color: var(--brass); } .sk-table { min-width: 640px; } .sk-tok { display: flex; align-items: center; gap: 10px; } .sk-tok img { width: 24px; height: 24px; border-radius: 50%; background: var(--paper-2); flex: none; } .sk-tok b { font-weight: 500; min-width: 3.4em; } .sk-tok .sub { font-size: 13.5px; white-space: normal; } .sk-radio { display: inline-flex; gap: 6px; align-items: center; font-size: 14px; color: var(--ink-2); margin-right: 14px; cursor: pointer; } .sk-figs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: 1px solid var(--rule-2); } .sk-figs > div { padding: 16px 16px 16px 0; display: grid; gap: 6px; } .sk-figs > div + div { padding-left: 16px; border-left: 1px solid var(--rule-2); } .sk-figs b { font: 400 24px/1.1 var(--serif); font-variant-numeric: lining-nums tabular-nums; } .stocks select, .start select { font: 14px var(--sans); color: var(--ink); background: var(--field); border: 1px solid var(--field-edge); padding: 10px 12px; border-radius: 0; } @media (max-width: 760px) { .sk-figs { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sk-figs > div:nth-child(3) { padding-left: 0; border-left: 0; } } .sk-act { width: 1px; white-space: nowrap; text-align: right; } /* --------------------------------------------------------------------------------------------------------------- The app look for /start and /stocks (main.acct): rounded cards, pill buttons, big numbers, token rows with logos. Scoped to .acct so the rest of the site keeps its editorial style. */ :root { --card: #fbf8f1; --card-2: #f5f0e5; --card-edge: #e3dccd; --glow: rgba(47, 107, 79, .14); } :root[data-theme="dark"] { --card: #1c1b15; --card-2: #23221b; --card-edge: #34322a; --glow: rgba(127, 191, 152, .16); } /* brass as small text: darker by day, so it reads (4.5:1) on brass-soft and the cards; --brass stays for fills and rules */ :root { --brass-ink: #765c2b; } :root[data-theme="dark"] { --brass-ink: var(--brass); } .acct { max-width: 1120px; padding-block: 28px 80px; gap: 18px; } .acct .board-heading { padding: 10px 0 4px; } .acct .board-heading h1 { font-size: clamp(36px, 5.2vw, 60px); } .acct .board-heading p { font-size: 18px; margin-top: 12px; } .acct .chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; padding: 0; list-style: none; } .acct .chips li { padding: 7px 13px; border-radius: 999px; background: var(--green-soft); color: var(--green); font: 500 13.5px/1 var(--sans); } .acct .chips li::before { content: "✓ "; } .acct .panel { background: var(--card); border: 1px solid var(--card-edge); border-radius: 22px; padding: 6px 22px 16px; box-shadow: 0 1px 0 rgba(27, 26, 22, .02), 0 10px 30px -18px rgba(27, 26, 22, .25); } .acct .panel > header { border-bottom: 0; padding: 16px 0 6px; } .acct .panel > header h2 { font-size: 24px; } .acct .panel > header .label { font-size: 13.5px; } .acct .rigbar { border-radius: 14px; border-left-width: 0; background: var(--brass-soft); } .acct .acts { border-top: 0; gap: 12px; margin-top: 6px; } .acct .act, .acct .acts > .act:nth-child(2n) { padding: 0; border: 0; } .acct .acts > .act, .acct .acts > .act:nth-child(2n) { background: var(--card-2); border-radius: 16px; padding: 16px 16px 8px; } .acct .act .t { font: 500 18px/1.3 var(--serif); margin-bottom: 6px; } .acct .act.alt { padding-top: 14px; } .acct .st-p { font-size: 14.5px; } .acct .btn { border-radius: 999px; padding: 13px 22px; font: 600 15px/1 var(--sans); border-color: var(--ink); } .acct .btn.sm { padding: 9px 15px; font-size: 13.5px; font-weight: 500; } .acct .btn.primary { background: var(--green); border-color: var(--green); color: #fbf8f1; box-shadow: 0 8px 20px -10px var(--green); } .acct .btn.primary:hover { background: var(--green-2); border-color: var(--green-2); } .acct .btn.primary:disabled { background: var(--paper-3); border-color: var(--paper-3); color: var(--muted); box-shadow: none; } .acct .act .row > .btn:first-of-type:not(:disabled) { background: var(--ink); border-color: var(--ink); color: var(--paper); } .acct .act .row > .btn.primary:first-of-type:not(:disabled) { background: var(--green); border-color: var(--green); color: #fbf8f1; } /* the dark theme's green is light, so what sits on it turns dark (near-white on it read at about 2:1) */ :root[data-theme="dark"] .acct .btn.primary:not(:disabled), :root[data-theme="dark"] .acct .act .row > .btn.primary:first-of-type:not(:disabled), :root[data-theme="dark"] .acct .sk-table .btn.sm:not(:disabled), :root[data-theme="dark"] .acct .st-step.done .st-n { color: var(--paper); } .acct .btn.big { width: 100%; padding: 17px 22px; font-size: 16.5px; } /* busy: the label stays and a small spinner turns after it (was: a blank grey pill while waiting) */ .acct .btn.busy, .acct .act .btn.busy { opacity: 1; color: var(--ink-2); background: var(--paper-2); border-color: var(--rule); cursor: progress; } .acct .btn.busy::after { content: ""; width: 13px; height: 13px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: app-spin .8s linear infinite; } @keyframes app-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .acct .btn.busy::after { animation: none; } } .acct input:not([type="radio"]):not([type="checkbox"]), .acct select, .stocks.acct select { border-radius: 14px; font-size: 16px; padding: 13px 14px; background: var(--field); border: 1px solid var(--card-edge); } .acct input:not([type="radio"]):not([type="checkbox"]):focus, .acct select:focus { border-color: var(--green); box-shadow: 0 0 0 3px var(--glow); } /* a field the page refused (aria-invalid, with the reason in its status line) */ .acct input[aria-invalid="true"]:not([type="radio"]):not([type="checkbox"]), .acct input[aria-invalid="true"]:not([type="radio"]):not([type="checkbox"]):focus { border-color: var(--red); box-shadow: 0 0 0 3px var(--red-soft); } .acct .st-addr { border-radius: 12px; background: var(--card-2); border: 1px dashed var(--card-edge); font-size: 12.5px; } .acct .wstat { font-size: 14.5px; } .acct .wstat.ok { font-weight: 500; } /* progress: three segments over the start steps */ .st-prog { list-style: none; margin: 4px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; counter-reset: sp; } .st-prog li { counter-increment: sp; font: 500 13.5px/1.2 var(--sans); color: var(--muted); padding-top: 12px; border-top: 4px solid var(--paper-3); border-radius: 2px; } .st-prog li::before { content: counter(sp) " · "; color: var(--faint); } .st-prog li.on { color: var(--ink); border-top-color: var(--brass); } .st-prog li.done { color: var(--green); border-top-color: var(--green); } .st-prog li.done::before { content: "✓ "; color: var(--green); } .acct .st-step[aria-disabled="true"] { opacity: .6; } .acct .st-step[aria-disabled="true"] .acts, .acct .st-step[aria-disabled="true"] > .act { opacity: 1; pointer-events: none; } .acct .st-n { width: 32px; height: 32px; border-radius: 50%; border: 0; background: var(--paper-3); font: 600 15px/1 var(--sans); font-style: normal; transform: translateY(-2px); } .acct .st-step.done .st-n { background: var(--green); color: #fbf8f1; font-size: 0; } .acct .st-step.done .st-n::before { content: "✓"; font-size: 15px; } .acct #st-1.done { padding-bottom: 8px; } .acct #st-bal { margin-left: auto; padding: 6px 12px; border-radius: 999px; background: var(--green-soft); color: var(--green); font: 600 13.5px/1.2 var(--sans); } .acct .st-steps { border-top: 0; gap: 8px; margin-top: 14px; } .acct .st-steps li, .acct .st-steps li + li { border: 0; padding: 12px 14px; border-radius: 14px; background: var(--card-2); } .acct #st-go-row input { flex: 1 1 240px; } .acct .st-done { border-top: 0; margin-top: 14px; padding: 22px; border-radius: 18px; background: linear-gradient(160deg, var(--green-soft), transparent 70%), var(--card-2); } .acct .st-done .t { font: 400 30px/1.2 var(--serif); } .acct .st-done .t b { font: 500 44px/1 var(--serif); color: var(--green); } .acct .st-done #st-key-box { margin: 16px 0 10px; padding: 14px 16px; border-radius: 14px; background: var(--card); border: 1px solid var(--card-edge); } /* the new agent's key (journey audit B1-13): the warning first, Copy the one main button, the AI setup folded away, and the way on off ("Copy the key to continue") until the key is copied */ .st-key-warn { color: var(--ink); } .st-key-warn b { font-weight: 600; } .st-key-ai { margin: 10px 0 8px; font-size: 14px; } .st-key-ai > summary { cursor: pointer; color: var(--ink-2); padding: 8px 0; min-height: 28px; } .st-key-ai > summary:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; border-radius: 6px; } .st-key-ai[open] > summary { margin-bottom: 6px; } #st-key-s:empty { display: none; } #st-key-s .btn { margin-left: 6px; } #st-go-wait.btn, #st-go-wait.btn:hover { cursor: not-allowed; color: var(--muted); border: 1.5px dashed var(--field-edge); background: transparent; box-shadow: none; } /* Stocks: eligibility first, then the account/line/deposit column beside the token list */ .acct .sk-elig { border-color: var(--brass); box-shadow: inset 4px 0 0 var(--brass); } .acct .sk-elig .pad { padding: 4px 0 10px; font-size: 15px; } .acct .sk-check { padding: 12px 14px; border-radius: 14px; background: var(--card-2); margin-bottom: 4px; } .sk-grid { display: grid; grid-template-columns: minmax(0, 1fr) 370px; grid-template-areas: "list side"; gap: 18px; align-items: start; } .sk-grid > .sk-side { grid-area: side; display: grid; gap: 18px; } .sk-grid > #sk-list { grid-area: list; } .sk-grid.solo { grid-template-columns: minmax(0, 1fr); grid-template-areas: "list"; } .sk-grid.solo > .sk-side { display: none; } .acct .sk-table tr[hidden] { display: none; } .acct #sk-pos { background: linear-gradient(165deg, var(--green-soft), transparent 60%), var(--card); border-color: var(--green); } .acct .sk-hero { padding: 6px 0 12px; } .acct .sk-hero .label { display: block; margin-bottom: 4px; } .acct .sk-hero b { font: 500 52px/1 var(--serif); color: var(--green); font-variant-numeric: lining-nums tabular-nums; } .acct .sk-figs { border-bottom: 0; gap: 8px; grid-template-columns: repeat(3, minmax(0, 1fr)); } .acct .sk-figs > div, .acct .sk-figs > div + div { padding: 10px 12px; border: 0; border-radius: 14px; background: var(--card-2); } .acct .sk-figs b { font-size: 19px; } .acct #sk-pos .act { padding-top: 14px; } .acct #sk-borrow-form input { flex: 1 1 120px; } .acct #sk-key-box { margin-top: 12px; padding: 12px 14px; border-radius: 14px; background: var(--card-2); } .acct #sk-dep { border-color: var(--green); box-shadow: 0 0 0 4px var(--glow), 0 10px 30px -18px rgba(27, 26, 22, .25); } .acct #sk-dep .acts { grid-template-columns: minmax(0, 1fr); } .acct #sk-amt { font: 500 22px/1.2 var(--sans); flex: 1 1 0; } .acct #sk-dep-form { flex-wrap: nowrap; } .acct #sk-dep-form #sk-max, .acct #sk-dep-form #sk-max:not(:disabled) { background: var(--green-soft); border-color: transparent; color: var(--green); flex: none; } .acct #sk-to, .acct #st-key-addr, .acct .st-done code { overflow-wrap: anywhere; word-break: break-all; } .acct #st-out, .acct .act .row > #st-out:first-of-type:not(:disabled) { background: transparent; color: var(--ink-2); border-color: var(--rule); } .acct #st-1.done > header .sub { display: none; } .acct #sk-quote.ok { font-size: 16px; } .acct .sk-radio input, .acct .act .sk-radio input { accent-color: var(--green); margin: 0; flex: none; width: 16px; height: 16px; padding: 0; } .acct .sk-radio { padding: 9px 14px; border-radius: 999px; background: var(--card); border: 1px solid var(--card-edge); margin: 0 6px 6px 0; } /* the token list as rows with logos; on a phone each row wraps instead of widening the page */ .acct .sk-search { width: 100%; margin: 6px 0 4px; } .acct .tablewrap { overflow: visible; } .acct table.sk-table { min-width: 0; } .acct .sk-table th { border-bottom: 1px solid var(--rule-2); } .acct .sk-table td { border-bottom: 1px solid var(--rule-2); padding-block: 12px; } .acct .sk-table tr:last-child td { border-bottom: 0; } .acct .sk-table tbody tr:hover td { background: var(--hover); } .sk-logo { position: relative; flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--paper-3); overflow: hidden; display: grid; place-items: center; } .sk-logo::before { content: attr(data-l); font: 600 12px/1 var(--sans); color: var(--ink-2); letter-spacing: .02em; } .sk-logo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 4px; box-sizing: border-box; } .sk-logo img.in { background: #fff; } .sk-logo.dk img.in { background: #1b1a16; } .acct .sk-tok { gap: 12px; } /* desktop: the token cell stays a table cell (as a flex box its bottom rule drifted from the row's) */ @media (min-width: 641px) { /* fixed columns: the numbers keep their width and the name takes the rest, cut with an ellipsis */ .acct table.sk-table { table-layout: fixed; } .acct .sk-table th:nth-child(2) { width: 96px; } .acct .sk-table th:nth-child(3) { width: 80px; } .acct .sk-table th:nth-child(4) { width: 78px; } .acct .sk-table th:nth-child(5) { width: 70px; } .acct .sk-table th.sk-act { width: 94px; } .acct .sk-table td.sk-tok { display: table-cell; overflow: hidden; } .acct .sk-table td.sk-tok > .sk-logo { display: inline-grid; vertical-align: middle; margin-right: 12px; } .acct .sk-table td.sk-tok > .nm { display: inline-grid; vertical-align: middle; max-width: calc(100% - 50px); } } .acct .sk-tok b { font: 600 15.5px/1.2 var(--sans); min-width: 0; display: block; } .acct .sk-tok .nm { display: grid; min-width: 0; } .acct .sk-tok .sub { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .acct .sk-table td.num:nth-child(2) { font: 600 15.5px/1.2 var(--sans); font-variant-numeric: tabular-nums; } /* a lending hold, under the price age: wraps inside its column instead of running over the next ones */ .acct .sk-table td.num .sub { display: block; white-space: normal; font-size: 12px; line-height: 1.3; margin-top: 2px; } .acct .sk-table .btn.sm { padding: 8px 14px; } .acct .sk-table .btn.sm:not(:disabled) { background: var(--green); border-color: var(--green); color: #fbf8f1; } .acct .pt-faq { padding-bottom: 6px; } .acct .pt-faq details:last-child { border-bottom: 0; } @media (max-width: 980px) { .sk-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "side" "list"; } } @media (max-width: 640px) { .acct { padding-block: 18px 64px; gap: 14px; } .acct .panel { padding: 4px 16px 12px; border-radius: 18px; } .acct .board-heading p { font-size: 16.5px; } .acct .acts { grid-template-columns: minmax(0, 1fr); } .acct .sk-hero b { font-size: 44px; } .acct .sk-figs { grid-template-columns: repeat(3, minmax(0, 1fr)); } .acct .sk-figs b { font-size: 16px; } .acct .st-prog li { font-size: 12.5px; } .acct #st-go-row .btn, .acct #sk-borrow-form .btn { flex: 1 1 100%; } .acct #sk-borrow-form input { flex: 1 1 0; min-width: 0; } .acct #sk-borrow-form select { flex: none; } /* each token row: logo and name, price on the right; the rest on a second line */ .acct .sk-table thead { display: none; } .acct .sk-table, .acct .sk-table tbody { display: block; } .acct .sk-table tr { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 12px 0; border-bottom: 1px solid var(--rule-2); } .acct .sk-table tr:last-child { border-bottom: 0; } /* the line break before "the rest": without it a row with empty balance cells fits on one line and squeezes the name away */ .acct .sk-table tr::after { content: ""; order: 2; flex-basis: 100%; height: 0; } .acct .sk-table td { display: block; border: 0; padding: 0; white-space: nowrap; } .acct .sk-table td.sk-tok { flex: 1 1 0; min-width: 0; display: flex; } .acct .sk-table td.sk-tok .nm { flex: 1 1 auto; min-width: 0; overflow: hidden; } .acct .sk-table td:empty { display: none; } .acct .sk-table td:nth-child(2) { margin-left: auto; } .acct .sk-table td:nth-child(n+3):not(.sk-act) { order: 3; font-size: 12.5px; color: var(--muted); padding-left: 46px; } .acct .sk-table td:nth-child(n+4):not(.sk-act) { padding-left: 0; } .acct .sk-table td[data-h]::after { content: " " attr(data-h); } .acct .sk-table td.sk-act { order: 4; margin-left: auto; width: auto; } } /* /account: the signed-in account, every agent it owns as a card */ .acct .ac-sum .ac-top { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 28px; align-items: end; } .acct .ac-figs { grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); } /* Home's $PRIORS tile: its figure leads to Seats; under it, what is in seats, or a link to buy some */ .ac-fig-link { color: inherit; text-decoration: none; justify-self: start; line-height: 1.1; } .ac-fig-link:hover b, .ac-fig-link:focus-visible b { text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 4px; } .ac-fig-sub { display: flex; flex-wrap: wrap; gap: 2px 8px; margin-top: -2px; font-size: 12.5px; color: var(--muted); } .ac-fig-sub[hidden], .ac-fig-sub > [hidden] { display: none; } .ac-fig-sub .k { font-size: 12.5px; } .acct .ac-addr { margin-top: 12px; } .acct #ac-out-btn { background: transparent; color: var(--ink-2); border-color: var(--rule); } .ac-agents { display: grid; grid-template-columns: repeat(auto-fill, minmax(440px, 1fr)); gap: 18px; } .ac-agents[hidden] { display: none; } .acct .ac-card > header { align-items: center; } .acct .ac-card .ac-id { font: 500 15px var(--sans); color: var(--muted); } .acct .ac-card .sk-hero b { font-size: 44px; } .ac-pill { margin-left: auto; padding: 6px 12px; border-radius: 999px; font: 600 12.5px/1 var(--sans); } .ac-pill.ok { background: var(--green-soft); color: var(--green); } .ac-pill.on { background: var(--brass-soft); color: var(--brass-ink); } .ac-pill.off { background: var(--paper-3); color: var(--ink-2); } .ac-pill.bad { background: var(--red-soft); color: var(--red); } /* the card's head: the agent's tree (agent-tree.js, drag to turn), its Score v2 and the five rungs */ .ac-hero { display: grid; grid-template-columns: 168px minmax(0, 1fr); gap: 20px; align-items: center; margin: 14px 0 6px; } .ac-tree { position: relative; aspect-ratio: 1; border-radius: 18px; overflow: hidden; border: 1px solid var(--rule-2); background: radial-gradient(70% 60% at 50% 42%, var(--green-soft), transparent 72%), var(--card-2); cursor: grab; touch-action: pan-y; user-select: none; } .ac-tree.turning { cursor: grabbing; } .ac-tree img, .ac-tree canvas.tree-live { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } .ac-tree:has(canvas.tree-live) img { visibility: hidden; } .ac-tree img:not([src]) { visibility: hidden; } .ac-tree-cap { position: absolute; left: 10px; top: 9px; z-index: 1; font: 500 10.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); pointer-events: none; } .ac-score .label { display: block; } .ac-score-n { display: flex; align-items: baseline; gap: 8px; margin-top: 2px; } .ac-score-n b { font: 400 64px/1 var(--serif); color: var(--green); font-variant-numeric: lining-nums tabular-nums; } .ac-score-n.bad b { color: var(--red); } .ac-score-n.none b { font-size: 34px; color: var(--muted); } .ac-score-n span { font: 500 13px var(--mono); color: var(--muted); } .ac-rungs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; margin-top: 12px; } .ac-rungs span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 10.5px/1.2 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); } .ac-rungs i { display: block; height: 5px; margin-bottom: 6px; border-radius: 3px; background: var(--paper-3); } .ac-rungs .on i { background: var(--green); } .ac-rungs .now { color: var(--ink); } .acct .ac-figs4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } /* with its wallet's USDG (journey audit B1-15): five figures, as many to a row as fit */ .acct .ac-figs4.ac-figs5 { grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); } /* the card's borrow, before it is pressed (journey audit B2-04): the fee, the repayment and its date */ .ac-quote { margin: 6px 0 0; } .ac-quote:empty { display: none; } /* several loans open (B2-10): each row with its own Repay */ .ac-loans.ac-loans-each li { flex-wrap: wrap; align-items: center; gap: 6px 12px; } .ac-loans.ac-loans-each li .btn { margin-left: auto; } html[data-hide-trees] .ac-hero { grid-template-columns: minmax(0, 1fr); } html[data-hide-trees] .ac-tree, html[data-hide-trees] .ag-item-tree { display: none; } @media (max-width: 640px) { .ac-hero { grid-template-columns: 118px minmax(0, 1fr); gap: 14px; } .ac-score-n b { font-size: 48px; } .ac-rungs span { color: transparent; } .ac-rungs span.now { color: var(--ink); overflow: visible; } .acct .ac-figs4, .acct .ac-figs4.ac-figs5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .acct .ac-figs5 > :last-child:nth-child(odd) { grid-column: 1 / -1; } } .ac-level { display: grid; gap: 8px; margin: 14px 0 2px; font-size: 14px; color: var(--ink-2); } .ac-bar { height: 8px; border-radius: 999px; background: var(--paper-3); overflow: hidden; } .ac-bar i { display: block; height: 100%; border-radius: 999px; background: var(--green); } .ac-stock { display: flex; align-items: center; gap: 12px; margin: 14px 0 0; padding: 10px 12px; border-radius: 14px; background: var(--card-2); font-size: 14.5px; } .ac-stock a { margin-left: auto; } .ac-loans { margin-top: 14px; padding: 12px 14px 6px; border-radius: 14px; background: var(--brass-soft); } .ac-loans .t { font: 500 17px/1.3 var(--serif); } .ac-loans ul { list-style: none; margin: 6px 0 10px; padding: 0; display: grid; gap: 4px; } .ac-loans li { display: flex; justify-content: space-between; gap: 12px; font-size: 15px; } .ac-loans .sub { color: var(--ink-2); } .acct .ac-borrow { margin-top: 14px; } .acct .ac-borrow input { flex: 1 1 120px; min-width: 0; } .acct .ac-card > .sub { margin-top: 4px; } @media (max-width: 760px) { .acct .ac-sum .ac-top { grid-template-columns: minmax(0, 1fr); gap: 8px; } .acct .ac-figs { grid-template-columns: repeat(2, minmax(0, 1fr)); } .acct .ac-figs > div:last-child:nth-child(odd) { grid-column: 1 / -1; } /* five tiles: the last one the row's width */ } @media (max-width: 640px) { .ac-agents { grid-template-columns: minmax(0, 1fr); } .acct .ac-borrow .btn { flex: 1 1 100%; } .acct .ac-borrow select { flex: none; } } /* Start: Go mode and Builder mode, the live strip, what an agent gets, and joining the builders */ .start .st-hero h1 { font-size: clamp(40px, 6vw, 72px); } .start .st-live { display: flex; flex-wrap: wrap; margin: 26px 0 0; padding: 0; } .start .st-live > div { display: flex; flex-direction: column-reverse; gap: 6px; padding: 2px 28px 2px 0; margin-right: 28px; border-right: 1px solid var(--rule); } .start .st-live > div:last-child { border-right: 0; margin-right: 0; padding-right: 0; } .start .st-live dd { margin: 0; font: 500 clamp(24px, 3vw, 32px)/1 var(--serif); color: var(--ink); font-variant-numeric: tabular-nums; } .start .st-live dt { font: 400 13.5px/1.2 var(--sans); color: var(--muted); } .start .st-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 6px; border-radius: 22px; background: var(--card-2); border: 1px solid var(--card-edge); } /* Go mode or Builder mode: the chosen one is a card of ink with its pixel mark (the site's "selected", as on the dev log's filters), the other stays flat and quiet */ .start .st-tab { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 16px; row-gap: 4px; align-items: center; text-align: left; padding: 16px 20px; border-radius: 16px; border: 1px solid transparent; background: transparent; color: var(--muted); cursor: pointer; font: 400 14px/1.4 var(--sans); transition: background .18s var(--ease), color .18s var(--ease); } .start .st-tab .px-ico { grid-row: span 2; width: 36px; height: 36px; color: var(--faint); transition: color .18s var(--ease); } .start .st-tab b { font: 500 22px/1.1 var(--serif); color: var(--ink-2); } .start .st-tab:hover { background: var(--hover); color: var(--ink-2); } .start .st-tab:hover .px-ico { color: var(--ink-2); } .start .st-tab.on, .start .st-tab.on:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); } .start .st-tab.on b, .start .st-tab.on .px-ico { color: var(--paper); } .start .st-tab.on > span { opacity: .78; } .start .st-tab:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; } .start .st-pane { display: grid; gap: 28px; } .start .st-pane[hidden] { display: none; } .start .st-gets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } .start .st-get { display: grid; gap: 6px; align-content: start; padding: 20px 22px; border-radius: 20px; background: var(--card); border: 1px solid var(--card-edge); } .start .st-get b { font: 500 21px/1.2 var(--serif); color: var(--ink); } .start .st-get > span:last-child { font: 400 15px/1.5 var(--sans); color: var(--ink-2); } .start .st-get-n { font: 500 13px/1 var(--mono); letter-spacing: .12em; color: var(--green); } .start .st-build-lede { margin: 0; max-width: 46em; font: 400 18px/1.55 var(--serif); color: var(--ink-2); } .start .st-builds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .start .st-build { display: grid; gap: 10px; align-content: start; justify-items: start; padding: 22px 24px; border-radius: 20px; background: var(--card); border: 1px solid var(--card-edge); } .start .st-build h3 { margin: 0; font: 500 24px/1.15 var(--serif); color: var(--ink); } .start .st-build p { margin: 0; font: 400 15px/1.55 var(--sans); color: var(--ink-2); } .start .st-build-k { font: 500 12px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--green); } .start .st-cmd { display: block; width: 100%; box-sizing: border-box; padding: 10px 12px; border-radius: 10px; background: var(--card-2); border: 1px solid var(--card-edge); font: 400 12.5px/1.5 var(--mono); color: var(--ink); overflow-wrap: anywhere; } /* Builder mode's Connect your AI (connect-ai.js): one tab per AI, each with its one action */ .start .st-connect { display: grid; gap: 16px; padding: 24px 26px; border-radius: 20px; background: var(--card); border: 1px solid var(--card-edge); } .start .st-connect h2 { margin: 0; font: 500 28px/1.15 var(--serif); color: var(--ink); } .start .st-ai-tabs { display: flex; flex-wrap: wrap; gap: 8px; } .start .st-ai-tab { padding: 8px 15px; border-radius: 999px; border: 1px solid var(--card-edge); background: var(--paper); font: 500 14px/1.2 var(--sans); color: var(--ink-2); cursor: pointer; } .start .st-ai-tab:hover { border-color: var(--ink-2); color: var(--ink); } .start .st-ai-tab.on { background: var(--ink); border-color: var(--ink); color: var(--paper); } .start .st-ai-tab:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; } .start .st-ai { display: grid; gap: 10px; justify-items: start; } .start .st-ai p, .start .st-steps, .start .st-mcp p, .start .st-can p { margin: 0; max-width: 46em; font: 400 15px/1.55 var(--sans); color: var(--ink-2); } .start .st-ai p.sub, .start .st-mcp p.sub { font-size: 13.5px; color: var(--muted); } .start .st-cmdrow { display: flex; gap: 8px; align-items: center; width: 100%; } .start .st-cmdrow .st-cmd { flex: 1 1 auto; min-width: 0; } .start .st-cmdrow .btn { flex: none; } .start .st-mcp { display: grid; gap: 8px; padding-top: 16px; border-top: 1px solid var(--rule-2); } .start .st-can { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } .start .st-can > div { display: grid; gap: 8px; align-content: start; } @media (max-width: 760px) { .start .st-gets, .start .st-builds, .start .st-can { grid-template-columns: minmax(0, 1fr); } .start .st-connect { padding: 20px 18px; } .start .st-cmdrow { flex-wrap: wrap; } .start .st-cmdrow .st-cmd { flex-basis: 100%; } .start .st-tab { padding: 12px 14px; column-gap: 12px; } .start .st-tab .px-ico { width: 24px; height: 24px; } .start .st-tab b { font-size: 19px; } .start .st-tab span { font-size: 12.5px; } } /* The sign-in window (web-src/privy-signin.mjs): Priors' own, over any page; one button that leaves for Google. */ .signin { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 16px; background: rgba(15, 20, 17, .55); backdrop-filter: blur(6px); animation: signin-in .18s var(--ease); } .signin-card { position: relative; width: min(400px, 100%); display: grid; justify-items: center; text-align: center; gap: 0; padding: 34px 28px 26px; background: var(--card, var(--paper)); border: 1px solid var(--card-edge, var(--rule)); border-radius: 22px; box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .55); color: var(--ink); } .signin-mark { width: 44px; height: 44px; } .signin-card h2 { margin: 14px 0 0; font: 500 30px/1.1 var(--serif); color: var(--ink); } .signin-sub { margin: 8px 0 24px; font: 400 15px/1.45 var(--sans); color: var(--muted); } .signin .signin-g { width: 100%; gap: 12px; padding: 14px 22px; border-radius: 999px; font: 600 15px/1 var(--sans); background: var(--field); border: 1px solid var(--field-edge); color: var(--ink); } .signin .signin-g:hover { background: var(--paper-2); border-color: var(--ink); color: var(--ink); } .signin .signin-g:disabled { color: var(--muted); } .signin .signin-g svg { flex: none; } .signin-note { margin: 16px 0 0; font: 400 13px/1.4 var(--sans); color: var(--faint); } .signin-x { position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font: 400 22px/1 var(--sans); cursor: pointer; } .signin-x:hover { background: var(--hover); color: var(--ink); } @keyframes signin-in { from { opacity: 0; } } @media (prefers-reduced-motion: reduce) { .signin { animation: none; } } /* Two-step verification (web/account-2fa.js): in Transfer out, and its code window (the sign-in window's look) */ .ac-2fa { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--rule); } .tf-setup, .tf-codes { display: grid; gap: 10px; margin-top: 12px; } .tf-qr svg { display: block; width: 180px; height: 180px; padding: 8px; background: #fff; border-radius: 12px; } .tf-qr svg rect { fill: #000; } /* black on white in both themes: what a phone's camera reads */ .tf-key { font: 500 14px/1.4 var(--mono, monospace); letter-spacing: .04em; word-break: break-all; user-select: all; } .tf-list { display: grid; grid-template-columns: repeat(2, max-content); gap: 6px 22px; margin: 0; padding-left: 22px; font: 500 14px/1.5 var(--mono, monospace); } .tf-code { font: 500 18px/1.2 var(--mono, monospace); letter-spacing: .12em; max-width: 12ch; } .tf-ask .tf-code { width: 100%; max-width: none; margin: 0 0 14px; padding: 12px 14px; text-align: center; border-radius: 12px; background: var(--field); border: 1px solid var(--field-edge); color: var(--ink); } .tf-ask .tf-code[aria-invalid="true"] { border-color: var(--red); } .tf-ask .btn.primary { width: 100%; } /* Sign in with Google on the account pages: a neutral button carrying Google's mark (web/start, stocks, account) */ .acct .btn.gbtn, .acct .act .row > .btn.gbtn:first-of-type:not(:disabled) { gap: 12px; padding: 14px 24px; background: var(--field); border-color: var(--field-edge); color: var(--ink); } .acct .btn.gbtn:hover, .acct .act .row > .btn.gbtn:first-of-type:not(:disabled):hover { background: var(--paper-2); border-color: var(--ink); color: var(--ink); } #st-privy-row, #sk-privy-row, #ac-privy-row { margin-top: 10px; } .acct .btn.gbtn .g-logo { flex: none; } /* Privy's key export window (A.exportKey). Its Copy key / Copy Phrase buttons live in Privy's own frame, laid out exactly as wide as the frame, but that page reserves a scrollbar gutter (html { scrollbar-gutter: stable }): with a desktop scrollbar that takes ~16px, Copy Phrase was cut short and Privy's loading box showed through. On a desktop the frame runs past its row by more than any gutter (the spare width is the window's own colour), and once the frame shows, the loading boxes behind it go. The loading and "Copied" boxes take the app's card colour, not Privy's blue-grey. */ :root { --privy-color-background-2: var(--card-2) !important; } #privy-dialog iframe[src*="/embedded-wallets/export"] { border: 0 !important; } @media (hover: hover) and (pointer: fine) { #privy-dialog iframe[src*="/embedded-wallets/export"] { width: calc(100% + 24px) !important; max-width: none !important; } } #privy-dialog iframe[src*="/embedded-wallets/export"][style*="opacity: 1"] ~ div { visibility: hidden; } @media (max-width: 560px) { .start .st-live > div { padding-right: 16px; margin-right: 16px; } .start .st-live dt { font-size: 12px; } } /* The Tools tab (web/account-x402.js, web/account-connect.js; its ids keep the name x402): what it is for in one line, two big choices, who pays, the tools as cards, Connect your AI and Let it pay; Sell your API in three steps. Tokens only, so dark mode follows. */ .acct .tl { display: grid; gap: 18px; padding-bottom: 22px; min-width: 0; } .acct .tl > *, .acct .tl-pane > * { min-width: 0; } .acct .tl-pane { display: grid; gap: 18px; min-width: 0; } .acct .tl-pane[hidden] { display: none; } .acct .tl-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 10px 24px; padding: 18px 0 0; border-bottom: 0; } .acct .tl-head h2 { margin: 0; font: 400 30px/1.1 var(--serif); letter-spacing: -.01em; color: var(--ink); } .acct .tl-lede { margin: 8px 0 0; max-width: 40em; font: 400 16.5px/1.45 var(--sans); color: var(--ink-2); } .acct .tl-how { position: relative; font: 500 13.5px/1.3 var(--sans); } .acct .tl-how > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 8px 12px; border-radius: 999px; border: 1px solid var(--card-edge); color: var(--muted); background: var(--card); } .acct .tl-how > summary::-webkit-details-marker { display: none; } .acct .tl-how > summary .i { display: inline-grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; border: 1px solid currentColor; font: 600 11px/1 var(--serif); } .acct .tl-how[open] > summary, .acct .tl-how > summary:hover { color: var(--ink); border-color: var(--ink); } .acct .tl-how > p { position: absolute; right: 0; top: calc(100% + 8px); z-index: 5; width: min(360px, 80vw); margin: 0; padding: 14px 16px; border-radius: 14px; background: var(--card); border: 1px solid var(--card-edge); box-shadow: 0 14px 34px -18px rgba(27, 26, 22, .45); font: 400 14px/1.5 var(--sans); color: var(--ink-2); } /* the switch: two big plain choices (a tablist) */ .acct .tl-switch { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin: 0; padding: 5px; border-radius: 18px; background: var(--card-2); border: 1px solid var(--card-edge); } .acct .tl-switch .ax-tab { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 12px 16px; border: 0; border-radius: 13px; background: transparent; color: var(--ink-2); text-align: left; cursor: pointer; font: inherit; } .acct .tl-switch .ax-tab:hover { background: var(--hover); } .acct .tl-switch .ax-tab b { display: block; font: 500 19px/1.15 var(--serif); color: inherit; } .acct .tl-switch .ax-tab small { display: block; margin-top: 2px; font: 400 13px/1.3 var(--sans); color: var(--muted); } .acct .tl-switch .ax-tab.on, .acct .tl-switch .ax-tab.on:hover { background: var(--ink); color: var(--paper); } .acct .tl-switch .ax-tab.on small { color: var(--paper); opacity: .75; } .acct .tl-switch .ico { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--card); color: var(--green); font: 600 17px/1 var(--sans); } .acct .tl-switch .ax-tab.on .ico { background: color-mix(in srgb, var(--paper) 16%, transparent); color: var(--paper); } /* Use tools: who pays, and the three steps */ .acct .tl-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; } .acct .tl-payer { display: grid; gap: 4px; } .acct .tl-payer[hidden] { display: none; } .acct .tl-payer-row { display: flex; align-items: center; gap: 10px; font: 500 14px/1.2 var(--sans); color: var(--muted); } .acct .tl-payer select { padding: 9px 34px 9px 12px; font: 500 15px var(--sans); color: var(--ink); max-width: 260px; } .acct .tl-payer-one { font: 600 15px/1.2 var(--sans); color: var(--ink); } .acct .tl-bal { font: 400 13.5px/1.4 var(--sans); color: var(--ink-2); } .acct .tl-bal.empty { color: var(--brass-ink, var(--brass)); } .acct .tl-start { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; } .acct .tl-start a { display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 6px 12px 6px 7px; border-radius: 999px; background: var(--card-2); border: 1px solid var(--card-edge); font: 500 13.5px/1.1 var(--sans); color: var(--ink-2); text-decoration: none; } .acct .tl-start a:hover { border-color: var(--field-edge); color: var(--ink); } .acct .tl-start a b { font-weight: 500; } .acct .tl-start a span { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--card); border: 1px solid var(--card-edge); font: 600 12px/1 var(--sans); color: var(--muted); } .acct .tl-where { margin: -6px 0 0; max-width: 52em; font: 400 14px/1.5 var(--sans); color: var(--muted); } .acct .tl-h { display: flex; align-items: baseline; gap: 10px; margin: 6px 0 -6px; font: 500 21px/1.2 var(--serif); color: var(--ink); } .acct .tl-h .n { font: 500 13px/1 var(--sans); color: var(--muted); } .acct .tl-h:focus { outline: none; } /* the catalog */ .acct .tl-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 14px; } .acct .tl-card { display: grid; align-content: start; gap: 12px; padding: 18px 18px 14px; border-radius: 18px; background: var(--card-2); border: 1px solid var(--card-edge); min-width: 0; } .acct .tl-card > * { min-width: 0; } .acct .tl-card-top { display: flex; gap: 14px; align-items: flex-start; min-width: 0; } .acct .tl-glyph { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 13px; background: var(--card); border: 1px solid var(--card-edge); color: var(--green); font: 500 22px/1 var(--serif); } .acct .tl-card h4 { margin: 2px 0 0; font: 500 21px/1.2 var(--serif); color: var(--ink); overflow-wrap: anywhere; } .acct .tl-card p { margin: 0; font: 400 15px/1.5 var(--sans); color: var(--ink-2); overflow-wrap: anywhere; } .acct .tl-facts { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0; padding: 12px 0 0; border-top: 1px solid var(--card-edge); } .acct .tl-facts div { display: grid; gap: 3px; } .acct .tl-facts dt { font: 500 12px/1 var(--sans); color: var(--muted); } .acct .tl-facts dd { margin: 0; font: 600 16px/1.2 var(--sans); color: var(--ink); } .acct .tl-facts dd small { font: 400 13px/1.2 var(--sans); color: var(--muted); } .acct .tl-facts dd.new { font-weight: 500; font-size: 14.5px; color: var(--ink-2); } .acct .tl-card .tl-cap { font-size: 13.5px; line-height: 1.45; color: var(--muted); } .acct .tl-card .tl-cap.warn { color: var(--red); } .acct .tl-card-acts { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; } .acct .tl-dev { font: 400 13px/1.45 var(--sans); color: var(--muted); min-width: 0; } .acct .tl-dev > summary { cursor: pointer; padding: 6px 0; font: 500 13px/1.3 var(--sans); color: var(--muted); } .acct .tl-dev > summary:hover { color: var(--ink); } .acct .tl-dev[open] { flex: 1 1 100%; } .acct .tl-dev dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 14px; margin: 8px 0 0; padding: 12px; border-radius: 12px; background: var(--field); border: 1px solid var(--card-edge); } .acct .tl-dev dt { color: var(--muted); } .acct .tl-dev dd { margin: 0; color: var(--ink-2); overflow-wrap: anywhere; } .acct .tl-dev code { font: 400 12.5px/1.4 var(--mono); color: var(--ink); } .acct .tl-seen pre { margin: 8px 0 0; padding: 12px; border-radius: 12px; background: var(--field); border: 1px solid var(--card-edge); font: 400 13px/1.5 var(--sans); color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; } .acct .tl-copied { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; background: var(--green-soft); border: 1px solid color-mix(in srgb, var(--green) 35%, transparent); font: 400 14px/1.45 var(--sans); color: var(--ink-2); } .acct .tl-copied[hidden] { display: none; } .acct .tl-copied b { color: var(--green); } .acct .tl-copied .ok { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--green); color: var(--paper); font: 700 12px/1 var(--sans); } .acct .btn.tl-done { background: var(--green-soft); border-color: var(--green); color: var(--green); box-shadow: none; } .acct .tl-more { margin: -2px 0 0; font: 400 14.5px/1.4 var(--sans); color: var(--muted); } .acct .tl-skel { display: grid; gap: 12px; padding: 18px; border-radius: 18px; background: var(--card-2); border: 1px solid var(--card-edge); } .acct .tl-skel i { display: block; height: 14px; border-radius: 7px; background: color-mix(in srgb, var(--card-edge) 70%, transparent); } .acct .tl-skel i.t { width: 55%; height: 20px; } .acct .tl-skel i.s { width: 85%; } .acct .tl-skel i.u { width: 40%; } .acct .tl-note { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between; padding: 16px 18px; border-radius: 16px; border: 1px solid var(--card-edge); background: var(--card-2); font: 400 15px/1.45 var(--sans); color: var(--ink-2); } .acct .tl-note[hidden] { display: none; } .acct .tl-note.warn { border-color: color-mix(in srgb, var(--red) 35%, transparent); background: var(--red-soft); } /* Connect your AI */ .acct .tl-connect { display: grid; gap: 16px; padding: 20px 22px 22px; border-radius: 20px; background: var(--card-2); border: 1px solid var(--card-edge); min-width: 0; } .acct .tl-connect > * { min-width: 0; } .acct .tl-connect > header { padding: 0; border: 0; display: block; } .acct .tl-connect > header h3 { margin: 0; font: 500 23px/1.2 var(--serif); color: var(--ink); } .acct .tl-connect > header p { margin: 6px 0 0; font: 400 15px/1.45 var(--sans); color: var(--ink-2); } .acct .tl-connect-body { display: grid; gap: 16px; min-width: 0; } .acct .tl-apps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; max-width: 520px; } .acct .tl-apps-more { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; } .acct .tl-apps-more[hidden] { display: none; } .acct .tl-app { display: grid; justify-items: center; align-content: center; gap: 8px; min-height: 44px; padding: 12px 6px 11px; border-radius: 14px; border: 1px solid var(--card-edge); background: var(--card); color: var(--ink-2); font: 500 13.5px/1.2 var(--sans); cursor: pointer; text-align: center; min-width: 0; } .acct .tl-app.big { padding: 16px 8px 14px; font-size: 15px; } .acct .tl-app:hover { border-color: var(--field-edge); } .acct .tl-app .logo { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--card-2); border: 1px solid var(--card-edge); font: 600 14px/1 var(--sans); color: var(--ink); } .acct .tl-app.on { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); color: var(--ink); } .acct .tl-more-apps[aria-expanded="true"] { border-style: dashed; } .acct .tl-app-body { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 18px; align-items: start; } .acct .tl-go { display: grid; gap: 14px; min-width: 0; } .acct .tl-go > .btn.primary { justify-self: start; padding: 15px 26px; font-size: 16px; } .acct .tl-go > .sub { margin: -4px 0 0; font-size: 13.5px; } .acct .tl-go code, .acct .tl-pay code { font: 400 12.5px var(--mono); overflow-wrap: anywhere; } .acct .tl-link { display: grid; gap: 6px; min-width: 0; } .acct .tl-link .label { font: 500 12.5px/1.2 var(--sans); color: var(--muted); } .acct .tl-link-row { display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 14px; border-radius: 14px; background: var(--field); border: 1px solid var(--field-edge); min-width: 0; } .acct .tl-link-row code { flex: 1; min-width: 0; font: 400 14.5px/1.3 var(--mono); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .acct .tl-link-row .btn { flex: none; } .acct .tl-steps { counter-reset: s; display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; } .acct .tl-steps li { counter-increment: s; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; font: 400 15px/1.5 var(--sans); color: var(--ink-2); } .acct .tl-steps li::before { content: counter(s); display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--ink); color: var(--paper); font: 600 13px/1 var(--sans); } .acct .tl-steps li > span { min-width: 0; } .acct .tl-steps li b { color: var(--ink); font-weight: 600; } .acct .tl-steps li .btn { margin: 4px 6px 0 0; vertical-align: middle; } .acct .tl-steps q { font-style: italic; quotes: "\201C" "\201D"; } .acct .tl-code { font: 400 13.5px/1.4 var(--sans); color: var(--muted); min-width: 0; } .acct .tl-code > summary { cursor: pointer; display: list-item; padding: 6px 0; font: 500 13.5px/1.3 var(--sans); color: var(--muted); } .acct .tl-code > summary:hover { color: var(--ink); } .acct .tl-code > p { margin: 8px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--ink-2); } .acct .tl-code h5 { margin: 14px 0 0; font: 600 13.5px/1.3 var(--sans); color: var(--ink); } .acct .tl-code pre { margin: 8px 0 0; padding: 12px 14px; border-radius: 12px; background: var(--field); border: 1px solid var(--field-edge); overflow-x: auto; font: 400 12.5px/1.55 var(--mono); color: var(--ink); white-space: pre; max-width: 100%; } .acct .tl-code .sub .btn { margin-left: 6px; } .acct .tl-can { display: grid; gap: 10px; padding: 16px 18px; border-radius: 16px; background: var(--card); border: 1px solid var(--card-edge); } .acct .tl-can h4 { margin: 0; font: 600 14px/1.2 var(--sans); color: var(--ink); } .acct .tl-can ul { display: grid; gap: 8px; margin: 0 0 4px; padding: 0; list-style: none; } .acct .tl-can li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 9px; font: 400 14.5px/1.45 var(--sans); color: var(--ink-2); } .acct .tl-can li::before { display: grid; place-items: center; width: 20px; height: 20px; margin-top: 1px; border-radius: 50%; font: 700 11px/1 var(--sans); } .acct .tl-can li.y::before { content: "\2713"; background: var(--green-soft); color: var(--green); } .acct .tl-can li.n::before { content: "\2715"; background: var(--card-2); color: var(--muted); border: 1px solid var(--card-edge); } /* Let it pay */ .acct .tl-pay { display: grid; gap: 14px; padding: 14px 16px; border-radius: 16px; border: 1px dashed var(--field-edge); background: var(--card); min-width: 0; } .acct .tl-pay:focus { outline: none; } .acct .tl-pay.open { border-style: solid; border-color: var(--card-edge); } .acct .tl-pay-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px 18px; } .acct .tl-pay-head > div { flex: 1 1 320px; min-width: 0; } .acct .tl-pay h4 { margin: 0; font: 600 15.5px/1.3 var(--sans); color: var(--ink); } .acct .tl-pay h4 .tag { display: inline-block; margin-left: 8px; padding: 3px 8px; border-radius: 999px; background: var(--brass-soft); color: var(--brass-ink, var(--brass)); font: 600 11px/1.2 var(--sans); vertical-align: 2px; } .acct .tl-pay p { margin: 4px 0 0; max-width: 46em; font: 400 14px/1.45 var(--sans); color: var(--ink-2); } .acct .tl-pay .tl-need-h { margin-top: 10px; font-weight: 600; color: var(--ink); } .acct .tl-need-list { margin: 4px 0 0; padding-left: 18px; display: grid; gap: 3px; font: 400 14px/1.45 var(--sans); color: var(--ink-2); } .acct .tl-pay-body { display: grid; gap: 14px; min-width: 0; } .acct .tl-pay-body[hidden] { display: none; } .acct .tl-pay-body > * { min-width: 0; } .acct .tl-why { padding: 10px 12px; border-radius: 12px; background: var(--brass-soft); color: var(--ink) !important; } .acct .tl-chips { display: flex; flex-wrap: wrap; gap: 6px; } .acct .tl-chip { min-height: 36px; padding: 8px 13px; border-radius: 999px; border: 1px solid var(--field-edge); background: transparent; color: var(--ink-2); font: 500 13.5px/1 var(--sans); cursor: pointer; } .acct .tl-chip.on { background: var(--ink); border-color: var(--ink); color: var(--paper); } .acct .tl-limits { margin: 0; padding: 10px 12px; border-radius: 12px; background: var(--card-2); font: 400 14px/1.5 var(--sans); color: var(--ink-2); } /* Sell your API */ .acct .tl-sell-hero h3 { margin: 0; font: 500 24px/1.2 var(--serif); color: var(--ink); } .acct .tl-sell-hero p { margin: 6px 0 0; font: 400 15.5px/1.45 var(--sans); color: var(--ink-2); } .acct .tl-sell-hero .tl-need { font-size: 14px; color: var(--muted); } .acct .tl-sell-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; counter-reset: s; } .acct .tl-sell-steps li { counter-increment: s; display: grid; gap: 6px; align-content: start; padding: 16px; border-radius: 16px; background: var(--card-2); border: 1px solid var(--card-edge); min-width: 0; } .acct .tl-sell-steps li::before { content: counter(s); display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--ink); color: var(--paper); font: 600 13px/1 var(--sans); } .acct .tl-sell-steps b { font: 600 16px/1.3 var(--sans); color: var(--ink); } .acct .tl-sell-steps span { font: 400 14px/1.5 var(--sans); color: var(--ink-2); } .acct .tl-earn { display: grid; gap: 14px; } .acct .tl-earn[hidden] { display: none; } .acct .tl-earn > div { padding: 16px 18px; border-radius: 16px; border: 1px solid var(--card-edge); background: var(--card); min-width: 0; } .acct .tl-earn h4 { margin: 0 0 8px; font: 600 13px/1.2 var(--sans); color: var(--muted); } .acct .tl-earn .big { font: 500 26px/1.2 var(--serif); color: var(--ink); overflow-wrap: anywhere; } .acct .tl-earn .big em { font-style: normal; color: var(--green); } .acct .tl-earn .big .sub { font: 400 14px/1.4 var(--sans); } .acct .tl-earn p { margin: 6px 0 0; font: 400 14px/1.5 var(--sans); color: var(--ink-2); overflow-wrap: anywhere; } .acct .tl-sales { padding: 16px 18px; border-radius: 16px; border: 1px solid var(--card-edge); background: var(--card); } .acct .tl-sales[hidden] { display: none; } .acct .tl-sales h4 { margin: 0 0 8px; font: 600 13px/1.2 var(--sans); color: var(--muted); } .acct .tl-sales ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; } .acct .tl-sales li { display: grid; gap: 2px; font: 400 14px/1.45 var(--sans); } .acct .tl-sales li b { font: 600 15px/1.3 var(--sans); color: var(--ink); } .acct .tl-form { display: grid; gap: 14px; padding: 18px 20px 20px; border-radius: 18px; background: var(--card-2); border: 1px solid var(--card-edge); min-width: 0; } .acct .tl-form[hidden] { display: none; } .acct .tl-form > * { min-width: 0; } .acct .tl-form h4 { margin: 0; font: 500 20px/1.2 var(--serif); color: var(--ink); } .acct .tl-form > .sub { margin: 0; } .acct .ax-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; align-items: start; } .acct .ax-grid label { display: grid; gap: 6px; font: 500 13.5px/1.3 var(--sans); color: var(--muted); min-width: 0; } .acct .ax-grid .ax-wide { grid-column: 1 / -1; } .acct .ax-grid .sub { font-weight: 400; font-size: 12.5px; } .acct .ax-grid input, .acct .ax-grid select { box-sizing: border-box; width: 100%; min-width: 0; height: 46px; font: 15px var(--sans); color: var(--ink); background: var(--field); border: 1px solid var(--field-edge); border-radius: 12px; padding: 11px 13px; } .acct .tl-form .row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; } @media (max-width: 640px) { .acct .tl { gap: 16px; } .acct .tl-head { padding-top: 14px; } .acct .tl-head h2 { font-size: 26px; } .acct .tl-lede { font-size: 15.5px; } .acct .tl-how > p { left: 0; right: auto; } .acct .tl-switch .ax-tab { gap: 10px; padding: 10px 12px; } .acct .tl-switch .ico { width: 26px; height: 26px; border-radius: 8px; font-size: 13px; } .acct .tl-switch .ax-tab b { font-size: 17px; } .acct .tl-switch .ax-tab small { display: none; } .acct .tl-bar { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; } .acct .tl-payer-row { display: grid; grid-template-columns: auto minmax(0, 1fr); } .acct .tl-payer select { max-width: none; width: 100%; } .acct .tl-start { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; } .acct .tl-start a { flex-direction: column; gap: 6px; height: 100%; padding: 8px 4px; border-radius: 12px; text-align: center; font-size: 12.5px; line-height: 1.2; } .acct .tl-cards { grid-template-columns: minmax(0, 1fr); } .acct .tl-card-acts .btn.primary { flex: 1 1 100%; } .acct .tl-connect { padding: 16px 14px 18px; } .acct .tl-apps { max-width: none; } .acct .tl-apps-more { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; } .acct .tl-app .logo { width: 30px; height: 30px; font-size: 13px; } .acct .tl-app { padding: 10px 4px; font-size: 12.5px; } .acct .tl-app.big { padding: 12px 4px; font-size: 14px; } .acct .tl-app-body { grid-template-columns: minmax(0, 1fr); } .acct .tl-go > .btn.primary { justify-self: stretch; } .acct .tl-sell-steps, .acct .ax-grid { grid-template-columns: minmax(0, 1fr); } .acct .tl-pay-head > .btn { flex: 1 1 100%; } .acct .tl-dev dl { grid-template-columns: minmax(0, 1fr); gap: 2px; } .acct .tl-dev dd { margin-bottom: 6px; } .acct .tl-earn .big { font-size: 22px; } .acct .tl-form { padding: 16px 14px 18px; } } /* Stocks: beside the side panel (wide screens), the 35 tokens scroll inside their panel (header and search stay put), so the page stays short. On a phone the list sits under the panels, its header row is hidden and its rows are cards: there it is part of the page, which scrolls on past its end. */ @media (min-width: 981px) { .acct #sk-list .tablewrap { max-height: min(640px, 72vh); overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; } .acct #sk-list .sk-table thead th { position: sticky; top: 0; z-index: 1; background: var(--card); } } .acct .sk-builder { margin: 14px 0 0; padding-top: 14px; border-top: 1px solid var(--rule-2); font: 400 14px/1.5 var(--sans); color: var(--muted); } .acct .sk-builder b { color: var(--ink-2); font-weight: 600; } /* ------------------------------------------------------------------ the signed-in account (web/me.js, account page) */ /* pixel glyphs and trees: drawn in whole pixels, like the mark */ .px-ico { flex: none; display: block; shape-rendering: crispEdges; } .me-tree { flex: none; display: block; image-rendering: pixelated; } .me-plate { fill: var(--paper-2); } /* hide balances: every figure that is money blurs, on every page, until shown again */ html[data-hide-balances] .money, html[data-hide-balances] .ac-card .sk-hero b, html[data-hide-balances] .ac-card .sk-figs b, html[data-hide-balances] .ac-loans b { filter: blur(7px); user-select: none; } /* the header's account corner: the account's tree and its USDG, a menu of its figures and doors under it */ .me { position: relative; display: inline-flex; } .me::after { content: ""; position: absolute; left: -12px; right: 0; top: 100%; height: 16px; } /* the pointer's path to the menu */ .me-btn { display: inline-flex; align-items: center; gap: 10px; height: 42px; padding: 0 12px 0 4px; background: transparent; border: 1px solid var(--ink); color: var(--ink); cursor: pointer; font: 500 14px/1 var(--sans); } .me-btn:hover, .me.open .me-btn { background: var(--paper-2); } .me-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; } .me-btn .me-tree { width: 32px; height: 32px; } .me-bal { display: inline-flex; align-items: baseline; gap: 6px; } .me-bal b { font: 500 19px/1 var(--serif); font-variant-numeric: lining-nums tabular-nums; } .me-bal > span { font: 500 10.5px/1 var(--mono); letter-spacing: .1em; color: var(--muted); } .me .dd-caret { margin-left: 0; } .me.open .dd-caret { transform: translateY(0) rotate(225deg); } .me-menu { position: absolute; top: calc(100% + 14px); right: 0; z-index: 45; width: 340px; background: var(--paper); border: 1px solid var(--ink); box-shadow: 0 22px 60px -18px var(--shade); opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .16s var(--ease), transform .16s var(--ease), visibility 0s linear .16s; } .me.open .me-menu { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; } @media (hover: hover) { .me:hover .me-menu { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; } .me:hover .dd-caret { transform: translateY(0) rotate(225deg); } } .me.shut .me-menu, .me.shut:hover .me-menu { opacity: 0; visibility: hidden; transform: translateY(-4px); } .me.shut .dd-caret, .me.shut:hover .dd-caret { transform: translateY(-3px) rotate(45deg); } .me-head { display: flex; align-items: center; gap: 14px; padding: 18px 18px 16px; border-bottom: 1px solid var(--rule-2); } .me-head .me-tree { width: 48px; height: 48px; } .me-head b { display: block; font: 500 21px/1.15 var(--serif); color: var(--ink); overflow-wrap: anywhere; } .me-addr-line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 6px; font: 400 12.5px/1.2 var(--mono); color: var(--muted); } .me-addr-line .me-addr { margin-top: 0; font-family: var(--sans); font-size: 12px; } .me-addr { display: inline-flex; align-items: center; gap: 7px; margin-top: 6px; padding: 0; background: none; border: 0; font: 400 12.5px/1 var(--mono); color: var(--muted); cursor: pointer; } .me-addr:hover { color: var(--ink); } .me-figs { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px; padding: 14px 18px; border-bottom: 1px solid var(--rule-2); } .me-figs > div > span { display: block; font: 400 12.5px/1.2 var(--sans); color: var(--muted); } .me-figs b { display: block; margin-top: 6px; font: 500 28px/1 var(--serif); color: var(--ink); font-variant-numeric: lining-nums tabular-nums; } .me-figs b i { font: 500 11px/1 var(--mono); font-style: normal; letter-spacing: .1em; color: var(--muted); } .me-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 12px 18px 14px; border-bottom: 1px solid var(--rule-2); } .me-acts .btn { gap: 8px; } .me-acts .btn:first-child { background: var(--ink); color: var(--paper); } .me-acts .btn:first-child:hover { background: var(--ink-2); border-color: var(--ink-2); } .me-list { display: grid; padding: 6px 0; } .me-list > a, .me-list > button { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 10px 18px; background: none; border: 0; text-align: left; color: var(--ink); font: 500 14.5px/1.25 var(--sans); cursor: pointer; } .me-list > a:hover, .me-list > button:hover, .me-list > a:focus-visible, .me-list > button:focus-visible { background: var(--paper-2); outline: 0; } .me-list b { display: block; font-weight: 500; } .me-list i { display: block; margin-top: 2px; font-style: normal; font-size: 12.5px; font-weight: 400; color: var(--muted); } .me-list .px-ico { color: var(--ink-2); } .me-list a[aria-current="page"] b::after { content: " · here"; font: 400 11.5px var(--mono); color: var(--muted); } .me-hide .switch { pointer-events: none; } .me-hide[aria-checked="true"] .switch { background: var(--ink); border-color: var(--ink); } .me-hide[aria-checked="true"] .switch i { transform: translateX(16px); background: var(--paper); } .me-list > .me-out { margin-top: 6px; border-top: 1px solid var(--rule-2); padding-top: 12px; color: var(--red); } .me-list > .me-out .px-ico { color: var(--red); } @media (max-width: 900px) { .me-btn { height: 38px; padding: 0 8px 0 3px; gap: 8px; } .me-bal b { font-size: 17px; } } @media (max-width: 560px) { .me-btn { height: 34px; padding: 0 3px; } .me-btn .me-tree { width: 26px; height: 26px; } .me-bal, .me .dd-caret { display: none; } .me { position: static; } .me-menu { position: fixed; top: 56px; left: 10px; right: 10px; width: auto; max-height: calc(100vh - 72px); overflow-y: auto; } } /* the account page once signed in: its own header (the tree, who, the figures, the doors), then a strip of sections */ .account.in .board-heading { display: none; } .acct .ac-me { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 22px; align-items: center; padding: 14px 0 18px; border-bottom: 1px solid var(--rule-2); } .acct .ac-me .me-tree { width: 96px; height: 96px; } .acct .ac-me .eyebrow { margin: 0 0 6px; } .acct .ac-me h1, .acct .ac-me h2 { margin: 0; font: 500 clamp(28px, 3.4vw, 40px)/1.05 var(--serif); color: var(--ink); overflow-wrap: anywhere; } .acct .ac-me .ac-addr { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; margin-top: 12px; } .acct .ac-me .ac-addr code { font: 400 13px/1.35 var(--mono); color: var(--ink-2); overflow-wrap: anywhere; } .acct .ac-link { padding: 0; background: none; border: 0; font: 500 13.5px/1 var(--sans); color: var(--muted); cursor: pointer; text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 4px; } .acct .ac-link:hover { color: var(--ink); text-decoration-color: currentColor; } .acct .ac-name { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; } .acct .ac-name-form { margin-top: 10px; max-width: 520px; } .acct .ac-name-form .row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 6px; } .acct .ac-name-form input { flex: 1 1 220px; min-width: 0; font-family: var(--mono); } .acct .ac-name-form .sub { margin: 6px 0 0; font-size: 13px; color: var(--muted); } .acct .ac-doors { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; } .acct .ac-doors .btn { gap: 8px; } .acct .ac-sum .ac-top { padding-top: 16px; } .acct .ac-add { margin-top: 14px; padding: 14px 16px; border-radius: 14px; background: var(--card-2); border: 1px dashed var(--card-edge); } .acct .ac-add[hidden] { display: none; } .acct .ac-add p { margin: 0 0 10px; font: 400 14.5px/1.5 var(--sans); color: var(--ink-2); } /* ---- Add USDG, two ways (account-add.js): From Base, where the gas gate offers it, and On Robinhood Chain; the account page's Add block (#ac-add) and the start page's Add USDG step (#st-2). Both themes through the tokens ---- */ .add-ways { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; } .add-ways[hidden], .add-base[hidden], .add-rh[hidden] { display: none; } .add-way { padding: 7px 14px; border-radius: 999px; border: 1px solid var(--card-edge); background: var(--card); font: 500 13.5px/1.2 var(--sans); color: var(--ink-2); cursor: pointer; } .add-way:hover { border-color: var(--ink-2); color: var(--ink); } .add-way.on { background: var(--ink); border-color: var(--ink); color: var(--paper); } .add-way:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; } .add-base { display: grid; gap: 12px; min-width: 0; } .add-base p.add-lead { margin: 0; font: 400 14.5px/1.5 var(--sans); color: var(--ink-2); } .add-base p.add-lead b { font-weight: 600; color: var(--ink); } .add-where { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; max-width: 600px; padding: 14px 16px; border-radius: 12px; background: var(--card); border: 1px solid var(--card-edge); } .add-addr-box { flex: 1 1 210px; min-width: 0; display: grid; gap: 8px; justify-items: start; } .add-addr { font: 500 16px/1.35 var(--mono); color: var(--ink); overflow-wrap: anywhere; min-height: 22px; } .add-addr .wstat { padding: 0; font: 400 14px/1.45 var(--sans); } .add-qr { flex: none; } .add-qr[hidden] { display: none; } .add-qr svg { display: block; width: 112px; height: 112px; padding: 6px; background: #fff; border-radius: 10px; } .add-qr svg rect { fill: #000; } /* black on white in both themes: what a phone's camera reads */ .add-rules { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; font: 400 13.5px/1.45 var(--sans); color: var(--ink-2); } .add-rules li { position: relative; padding-left: 16px; } .add-rules li::before { content: ""; position: absolute; left: 3px; top: .6em; width: 5px; height: 5px; border-radius: 50%; background: var(--muted); } .add-rules li b { font-weight: 600; color: var(--ink); } .add-rules .add-rule-warn::before { background: var(--brass); } .add-deps { display: grid; gap: 8px; padding-top: 12px; border-top: 1px solid var(--card-edge); } .add-deps-h { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; } .add-live { display: inline-flex; align-items: center; gap: 6px; font: 400 12.5px/1 var(--sans); color: var(--muted); } .add-live[hidden], .add-link[hidden] { display: none; } .add-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); } @media (prefers-reduced-motion: no-preference) { .add-live i { animation: add-pulse 2.4s ease-in-out infinite; } } @keyframes add-pulse { 50% { opacity: .35; } } .add-link { padding: 0; background: none; border: 0; font: 500 13px/1.3 var(--sans); color: var(--muted); cursor: pointer; text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 4px; } .add-link:hover { color: var(--ink); text-decoration-color: currentColor; } .add-link:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; border-radius: 4px; } .add-dep-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; } .add-dep-list:empty { display: none; } .add-dep { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 9px 12px; border-radius: 10px; background: var(--card); border: 1px solid var(--card-edge); font: 400 13.5px/1.4 var(--sans); } .add-dep-amt { color: var(--ink); font-variant-numeric: tabular-nums; } .add-dep-st { font-weight: 500; color: var(--muted); } .add-dep-st.ok { color: var(--green); } .add-dep-st.warn { color: var(--red); } .add-dep-at { color: var(--muted); font-size: 12.5px; } .add-dep-tx { display: inline-flex; flex-wrap: wrap; gap: 4px 12px; margin-left: auto; font-size: 12.5px; } .add-base p.add-empty, .add-base p.add-note { margin: 0; font: 400 13px/1.45 var(--sans); color: var(--muted); } .add-base p.add-empty[hidden], .add-base p.add-note[hidden] { display: none; } .add-base .wstat { padding: 2px 0 0; } .add-base .wstat:empty { display: none; } .ac-sections { position: sticky; top: 66px; z-index: 20; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 10px 0; margin: -10px 0; background: var(--paper); } .ac-sections[hidden] { display: none; } .ac-sections::-webkit-scrollbar { display: none; } .ac-sections a { flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border: 1px solid var(--rule); border-radius: 999px; font: 500 14px/1 var(--sans); color: var(--ink-2); } .ac-sections a:hover { border-color: var(--ink); color: var(--ink); } .ac-sections a.on { background: var(--ink); border-color: var(--ink); color: var(--paper); } .ac-sections a .n { font: 500 12px/1 var(--mono); opacity: .7; } /* history: the account's ledger, newest first */ .acct .ac-feed { list-style: none; margin: 4px 0 0; padding: 0; } .acct .ac-ev { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 4px 14px; align-items: center; padding: 13px 0; border-bottom: 1px solid var(--rule-2); } .acct .ac-ev:last-child { border-bottom: 0; } .acct .ac-ev-ico { grid-row: span 2; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: var(--card-2); color: var(--ink-2); } .acct .ac-ev.repaid .ac-ev-ico, .acct .ac-ev.back .ac-ev-ico { color: var(--green); } .acct .ac-ev.defaulted .ac-ev-ico { color: var(--red); background: var(--red-soft); } .acct .ac-ev-what { font: 500 15px/1.3 var(--sans); color: var(--ink); min-width: 0; } .acct .ac-ev-amt { font: 500 17px/1 var(--serif); color: var(--ink); font-variant-numeric: lining-nums tabular-nums; text-align: right; white-space: nowrap; } .acct .ac-ev-amt.in { color: var(--green); } .acct .ac-ev-sub { font: 400 13px/1.3 var(--sans); color: var(--muted); min-width: 0; overflow-wrap: anywhere; } /* a borrow's loan, still open or repaid (journey audit B2-21) */ .ac-ev-chip { display: inline-block; margin-left: 4px; padding: 1px 8px; border-radius: 999px; background: var(--card-2); font: 500 12px/1.6 var(--sans); color: var(--muted); white-space: nowrap; vertical-align: 1px; } a.ac-ev-chip.open { background: var(--brass-soft); color: var(--ink); text-decoration: none; } a.ac-ev-chip.open:hover { text-decoration: underline; } /* an action sent and not confirmed yet, at the top of History until a read shows it (account-history.js sending) */ .acct .ac-ev.sending .ac-ev-ico { color: var(--ink); background: var(--brass-soft); } .acct .ac-ev.sending .ac-ev-what { color: var(--ink-2); } /* words kept on one line: an address, its Show button and the comma after it (account-x402.js Sell) */ .nowrap { white-space: nowrap; } .acct .ac-ev-when { font: 400 12.5px/1 var(--mono); color: var(--muted); text-align: right; white-space: nowrap; } .acct a.ac-ev-when:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; } @media (max-width: 760px) { .acct .ac-me { grid-template-columns: auto minmax(0, 1fr); gap: 16px; } .acct .ac-me .me-tree { width: 64px; height: 64px; } .acct .ac-doors { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; } .acct .ac-doors .btn { padding: 12px 8px; font-size: 14px; } } @media (max-width: 900px) { .ac-sections { top: 60px; } } /* the contact page (/contact): the form posts to the bot's POST /contact */ .contact .ct-panel { max-width: 760px; } .ct-form { display: grid; gap: 14px; } .ct-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .ct-field { display: grid; gap: 6px; } .ct-field > span { font: 500 12px var(--sans); color: var(--muted); letter-spacing: .04em; text-transform: uppercase; } .ct-field input, .ct-field textarea { width: 100%; box-sizing: border-box; } .ct-field textarea { resize: vertical; min-height: 150px; line-height: 1.5; } .ct-hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; } .ct-send { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .ct-status { margin: 0; font-size: 14px; } .ct-status.ok { color: var(--green); } .ct-status.warn { color: var(--red); } .ct-status.muted { color: var(--muted); } .ct-note { margin: 0; font-size: 12.5px; color: var(--muted); } .ct-addr { font-family: var(--mono); } @media (max-width: 640px) { .ct-row { grid-template-columns: 1fr; } } /* The privacy notice (privacy.html): the ledger's rules and type; the window it opens is privacy.css's */ .privacy-page .board-heading .aside { display: grid; justify-items: end; gap: 10px; } .pn-ver { font-size: 13px; color: var(--muted); } .pn-sec { margin-top: 34px; } .pn-list { margin: 0; padding: 14px 0 6px 20px; display: grid; gap: 10px; max-width: 52em; font: 400 17px/1.55 var(--serif); color: var(--ink-2); } .pn-list b { font-weight: 500; color: var(--ink); } .pn-h3 { margin: 26px 0 0; font: 500 20px/1.2 var(--serif); color: var(--green); } .pn-link { padding: 0; border: 0; background: none; font: inherit; color: var(--green); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; cursor: pointer; } .pn-link:hover { color: var(--ink); } .pn-tblwrap { overflow-x: auto; } .pn-tbl { width: 100%; min-width: 0; border-collapse: collapse; font-size: 14.5px; line-height: 1.5; } .pn-tbl th, .pn-tbl td { padding: 12px 18px 12px 0; text-align: left; vertical-align: top; white-space: normal; font-size: 14.5px; border-bottom: 1px solid var(--rule-2); } .pn-tbl tbody tr:hover td { background: none; } .pn-tbl th:last-child, .pn-tbl td:last-child { padding-right: 0; } .pn-tbl thead th { padding-top: 14px; font: 500 13px/1.3 var(--sans); color: var(--muted); border-bottom-color: var(--rule); } .pn-tbl tbody th { width: 28%; font-weight: 500; color: var(--ink); } .pn-tbl td { color: var(--ink-2); } .pn-tbl .pn-grp th { width: auto; padding: 24px 0 8px; font: 500 20px/1.2 var(--serif); color: var(--green); border-bottom-color: var(--rule); } .pn-keys { list-style: none; margin: 0; padding: 0; } .pn-keys li { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1.6fr) minmax(0, .85fr); gap: 4px 24px; padding: 12px 0; border-bottom: 1px solid var(--rule-2); font-size: 14.5px; line-height: 1.5; color: var(--ink-2); } .pn-k { color: var(--ink); overflow-wrap: anywhere; } .pn-k code { font-size: 13px; } .pn-kind { color: var(--muted); } .pn-kind.pn-opt { color: var(--green); } .pn-dl { margin: 0; display: grid; } .pn-dl > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr); gap: 4px 24px; padding: 12px 0; border-bottom: 1px solid var(--rule-2); } .pn-dl dt { font: 500 17px/1.35 var(--serif); color: var(--ink); } .pn-dl dd { margin: 0; font-size: 14.5px; color: var(--ink-2); } .privacy-page .prose { max-width: 46em; } /* a phone: each table row as a block, its cells under their column's name */ @media (max-width: 760px) { .privacy-page .board-heading .aside { justify-items: start; } .pn-tbl thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .pn-tbl, .pn-tbl tbody, .pn-tbl tr, .pn-tbl th, .pn-tbl td { display: block; width: auto; } .pn-tbl tr { padding: 12px 0; border-bottom: 1px solid var(--rule-2); } .pn-tbl tbody th, .pn-tbl td { width: auto; padding: 0; border: 0; } .pn-tbl tbody td::before { content: attr(data-k); display: block; margin-top: 8px; font: 500 12.5px/1.3 var(--sans); color: var(--muted); } .pn-tbl tr.pn-grp { padding: 0; border-bottom: 1px solid var(--rule); } .pn-tbl .pn-grp th { padding: 24px 0 8px; } .pn-keys li, .pn-dl > div { grid-template-columns: minmax(0, 1fr); } } /* Savings (account.html #ac-save) */ .acct .as-figs { grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 4px 0 14px; } .acct .as-form { display: grid; gap: 8px; margin-bottom: 10px; } .acct .as-form input { max-width: 220px; } .acct .ac-save p.sub { margin: 10px 0 0; } @media (max-width: 640px) { .acct .as-figs { grid-template-columns: minmax(0, 1fr); } .acct .as-form input { max-width: none; flex: 1; } } /* ---- Go mode, signed in: the account as a full-screen app (web/goapp.js). The site's top bar, footer and page heading give way to a sidebar and a top bar; on the account page one tab shows at a time. ---- */ body.goapp { --ga-side: 236px; --ga-top: 64px; background: var(--paper); } body.goapp > .nav, body.goapp > .foot, body.goapp .board-heading, body.goapp #ac-sections, body.goapp .sk-builder { display: none; } /* the app opening (mode.js decided Go mode before paint, goapp.js painted the shell from the corner's record): nothing of the public page shows while the page signs in; it fills the app, or gets the screen back (goapp.js release) */ html.go-boot body > .nav, html.go-boot body > .foot { display: none; } html.go-boot body > main { visibility: hidden; } /* /account signed out: the sign-in gate, full screen, nothing of the account behind it (mode.js sets html.ac-gate before paint; goapp.js release puts it back; account-page.js lifts it once signed in). Help (#ac-faq) opens below it. */ html.ac-gate body > .nav, html.ac-gate body > .foot { display: none; } html.ac-gate #main { display: block; max-width: none; padding: 0; border: 0; } html.ac-gate:not(.ac-gate-faq) #main > :not(#ac-in):not(#ac-rig):not(#ac-faq:target) { display: none !important; } /* the gate's Help opens the questions under it without changing the address (account-page.js #ac-gate-help) */ html.ac-gate.ac-gate-faq #main > :not(#ac-in):not(#ac-rig):not(#ac-faq) { display: none !important; } html.ac-gate.ac-gate-faq #main > #ac-faq { max-width: 760px; margin: 0 auto 64px; } /* a sign-in on the gate: the gate stays over the app while Home's first read paints under it, then fades once (account-page.js lifted) */ html.ac-lift body #main.account > #ac-in { display: flex !important; position: fixed; inset: 0; z-index: 990; min-height: 100vh; min-height: 100svh; margin: 0; padding: 64px 16px 40px; overflow: auto; background: radial-gradient(ellipse 60% 40% at 50% 30%, var(--glow), transparent 70%), var(--paper); } html.ac-lift #ac-privy-row, html.ac-lift #ac-rig-row, html.ac-lift .ac-gate-links { visibility: hidden; } html.ac-lift.ac-lift-out body #main.account > #ac-in { opacity: 0; transition: opacity .2s var(--ease, ease); pointer-events: none; } @media (prefers-reduced-motion: reduce) { html.ac-lift.ac-lift-out body #main.account > #ac-in { transition: none; } } html.ac-gate #ac-rig { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); width: min(560px, calc(100% - 32px)); margin: 0; z-index: 2; } html.ac-gate #ac-faq:target { max-width: 760px; margin: 0 auto 64px; } /* the gate's text waits for the reader's language (i18n.js), 3 s at most */ html.ac-gate.i18n-wait #ac-in { visibility: hidden; } .ac-gate-box { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; padding: 40px 0; text-align: center; } html.ac-gate .ac-gate-box { min-height: 100vh; min-height: 100svh; padding: 64px 16px 40px; background: radial-gradient(ellipse 60% 40% at 50% 30%, var(--glow), transparent 70%), var(--paper); } .ac-gate-box[hidden] { display: none; } .ac-gate-mark { display: inline-flex; align-items: center; gap: 12px; color: var(--ink); } .ac-gate-mark svg { width: 44px; height: 44px; } .ac-gate-mark span { font: 500 40px/1 var(--serif); letter-spacing: -.01em; position: relative; top: -2px; } .ac-gate-t { max-width: 22em; margin: 0; font: 400 19px/1.45 var(--sans); color: var(--ink-2); text-wrap: balance; } .ac-gate-box .act { width: min(420px, 100%); display: grid; gap: 12px; justify-items: stretch; text-align: left; } .ac-gate-box .act > .row { display: flex; justify-content: center; margin: 0; } .ac-gate-box .act > .row > .btn { flex: 1 1 auto; } .ac-gate-box .act > .wstat:empty { display: none; } .ac-gate-box .act > .wstat { text-align: center; } .ac-gate-links { display: flex; gap: 22px; margin-top: 6px; font-size: 14px; } .ac-gate-links a { color: var(--muted); text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 4px; } .ac-gate-links a:hover { color: var(--ink); text-decoration-color: currentColor; } @media (max-width: 560px) { .ac-gate-mark svg { width: 36px; height: 36px; } .ac-gate-mark span { font-size: 34px; } .ac-gate-t { font-size: 17px; } } .ga-opening { margin-left: var(--ga-side); padding: 40px var(--ga-gutter); display: flex; flex-wrap: wrap; align-items: center; gap: 12px; font: 500 15px/1.4 var(--sans); color: var(--muted); } .ga-opening-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--green); animation: ga-pulse 1.1s ease-in-out infinite; } @keyframes ga-pulse { 50% { opacity: .25; } } @media (prefers-reduced-motion: reduce) { .ga-opening-dot { animation: none; } } /* the content is centred in the space beside the sidebar, at most 1160 px wide; the top bar lines up with it */ body.goapp { --ga-gutter: max(32px, calc((100vw - var(--ga-side) - 1160px) / 2)); } body.goapp > main { box-sizing: border-box; width: auto; max-width: none; margin: 0 0 0 var(--ga-side); padding: 28px var(--ga-gutter) 72px; border: 0; } body.goapp > main:focus { outline: none; } /* the skip link's stop (goapp.js): the whole tab, not a control */ .ga-side { position: fixed; inset: 0 auto 0 0; width: var(--ga-side); z-index: 40; display: flex; flex-direction: column; gap: 6px; padding: 18px 14px; background: var(--card); border-right: 1px solid var(--card-edge); overflow-y: auto; } .ga-brand { display: flex; align-items: center; gap: 10px; padding: 4px 8px 16px; font: 500 24px/1 var(--serif); color: var(--ink); text-decoration: none; } .ga-brand svg { width: 28px; height: 28px; } .ga-mode { margin-left: auto; font: 600 10.5px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; font-style: normal; color: var(--green); background: var(--glow); border-radius: 999px; padding: 5px 8px; } .ga-tabs { position: relative; display: flex; flex-direction: column; gap: 2px; } /* the current tab's mark: one block that glides from tab to tab (goapp.js places it), with a pixel bar on its left */ .ga-ind { position: absolute; left: 0; right: 0; top: 0; z-index: 0; border-radius: 12px; background: var(--glow); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--green) 22%, transparent); pointer-events: none; } .ga-ind::before { content: ""; position: absolute; left: 0; top: 50%; width: 3px; height: 14px; margin-top: -7px; background: var(--green); box-shadow: 3px 0 0 0 color-mix(in srgb, var(--green) 35%, transparent); } .ga-tabs.ready .ga-ind { transition: transform .42s cubic-bezier(.3, 1.4, .45, 1), height .2s var(--ease); } .ga-tab { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; font: 500 15px/1.2 var(--sans); color: var(--ink-2, var(--ink)); text-decoration: none; } .ga-tab .px-ico { color: var(--muted); flex: none; transition: color .2s steps(3), transform .16s steps(2); } .ga-tab > span { position: relative; transition: transform .16s steps(2); } /* hover: the pixel icon lights and lifts a pixel, and a pixel rule types itself under the name, block by block */ .ga-tab > span::after { content: ""; position: absolute; left: 0; bottom: -4px; height: 2px; width: 100%; background: linear-gradient(90deg, var(--green) 0 4px, transparent 4px 6px) 0 0 / 6px 2px repeat-x; clip-path: inset(0 100% 0 0); transition: clip-path .3s steps(8); } .ga-tab:hover .px-ico, .ga-tab:focus-visible .px-ico { color: var(--green); transform: translateY(-1px); } .ga-tab:hover > span, .ga-tab:focus-visible > span { transform: translateX(2px); } .ga-tab:hover > span::after, .ga-tab:focus-visible > span::after { clip-path: inset(0 0 0 0); } .ga-tab.on > span::after { display: none; } .ga-tab.on { color: var(--ink); font-weight: 600; } .ga-tab.on .px-ico { color: var(--green); } .ga-foot .ga-tab.on { background: var(--glow); } @media (prefers-reduced-motion: reduce) { .ga-tabs.ready .ga-ind, .ga-tab .px-ico, .ga-tab > span, .ga-tab > span::after { transition: none; } } .ga-foot { margin-top: auto; display: flex; flex-direction: column; gap: 2px; padding-top: 12px; border-top: 1px solid var(--card-edge); } .ga-new { color: var(--green); } .ga-new .px-ico { color: var(--green); } .ga-builder { display: block; margin-top: 8px; padding: 10px 12px; border-radius: 12px; border: 1px dashed var(--card-edge); font: 500 13px/1.3 var(--sans); color: var(--muted); text-decoration: none; } .ga-builder:hover { color: var(--ink); border-color: var(--muted); } /* Priors on X, under Help (goapp.js): a quiet link with X's mark, as the public footers draw it */ /* and Privacy choices under it (privacy.js opens its window), the same quiet link with a lock */ .ga-x, .ga-privacy { display: flex; align-items: center; gap: 12px; min-height: 40px; padding: 8px 12px; border-radius: 12px; font: 500 13px/1.3 var(--sans); color: var(--muted); text-decoration: none; } .ga-x svg, .ga-privacy svg { flex: none; width: 14px; height: 14px; margin: 0 2px; } .ga-x > span:last-child { margin-left: auto; font-size: 12px; } .ga-x:hover, .ga-x:focus-visible, .ga-privacy:hover, .ga-privacy:focus-visible { color: var(--ink); background: var(--glow); } /* the language menu (goapp.js): a quiet button above Builder mode, the languages in their own names under it */ .ga-lang { margin-top: 8px; } .ga-lang-btn { display: flex; align-items: center; gap: 8px; width: 100%; padding: 9px 12px; border-radius: 12px; border: 1px solid var(--card-edge); background: none; color: var(--muted); font: 500 13px/1.3 var(--sans); text-align: left; cursor: pointer; } .ga-lang-btn > span { flex: 1; min-width: 0; } .ga-lang-btn:hover, .ga-lang-btn[aria-expanded="true"] { color: var(--ink); border-color: var(--muted); } .ga-lang-btn[aria-expanded="true"] .dd-caret { transform: translateY(0) rotate(225deg); } .ga-lang-list { list-style: none; margin: 6px 0 0; padding: 4px; display: flex; flex-direction: column; gap: 2px; border-radius: 12px; background: var(--card-2); border: 1px solid var(--card-edge); } .ga-lang-list[hidden] { display: none; } .ga-lang-list button { width: 100%; padding: 8px 10px; border: 0; border-radius: 8px; background: none; color: var(--ink); font: 500 14px/1.2 var(--sans); text-align: left; cursor: pointer; } .ga-lang-list button:hover, .ga-lang-list button:focus-visible { background: var(--glow); } .ga-lang-list [aria-current="true"] { font-weight: 600; } .ga-lang-list [aria-current="true"]::after { content: " ✓"; color: var(--green); } .ga-top { position: sticky; top: 0; z-index: 30; margin-left: var(--ga-side); height: var(--ga-top); display: flex; align-items: center; gap: 14px; padding: 0 var(--ga-gutter); background: color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--card-edge); } .ga-top { padding-right: 24px; } .ga-title { margin: 0; font: 500 26px/1 var(--serif); letter-spacing: -.3px; white-space: nowrap; } /* the house's figures, like a market's header */ .ga-stats { display: flex; align-items: center; gap: 4px; margin: 0 0 0 22px; min-width: 0; overflow: hidden; } .ga-stat { position: relative; padding: 4px 14px; border-left: 1px solid var(--card-edge); } .ga-stat:first-child { border-left: 0; } .ga-stats::before { content: attr(data-k); flex: none; align-self: center; padding: 3px 9px; border-radius: 999px; background: var(--card-2); font: 600 10.5px/1.2 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); white-space: nowrap; } .ga-stat dt { font: 500 11px/1.2 var(--sans); color: var(--muted); white-space: nowrap; } .ga-stat dd { margin: 3px 0 0; font: 600 15px/1.1 var(--sans); font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap; } .ga-stat.zero dd { color: var(--green); } .ga-stat.tick dd { animation: ga-tick 1.4s var(--ease); } @keyframes ga-tick { 0% { color: var(--green); text-shadow: 0 0 12px color-mix(in srgb, var(--green) 50%, transparent); } 100% { color: inherit; text-shadow: none; } } @media (max-width: 1640px) { .ga-stat[data-stat="agents"], .ga-stat[data-stat="loans"] { display: none; } } @media (max-width: 1320px) { .ga-stat[data-stat="reserve"], .ga-stat[data-stat="lost"] { display: none; } } @media (max-width: 1080px) { .ga-stats { display: none; } } /* notes in the bottom right corner */ .ga-toasts { position: fixed; right: 22px; bottom: 22px; z-index: 60; display: flex; flex-direction: column; gap: 10px; width: min(360px, calc(100vw - 32px)); pointer-events: none; } .ga-toast { position: relative; pointer-events: auto; display: flex; align-items: center; gap: 12px; padding: 12px 14px 14px; border-radius: 14px; background: var(--card); border: 1px solid var(--card-edge); box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .55); color: var(--ink); text-decoration: none; overflow: hidden; animation: ga-toast-in .42s cubic-bezier(.3, 1.35, .45, 1) both; } .ga-toast::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; background: var(--muted); } .ga-toast.up::before { background: var(--green); } .ga-toast.down::before { background: var(--red); } .ga-toast-logo img { display: block; width: 32px; height: 32px; border-radius: 8px; background: #fff; } .ga-toast-t { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .ga-toast-t b { font: 600 14.5px/1.2 var(--sans); } .ga-toast-t b em { font-style: normal; font-variant-numeric: tabular-nums; } .ga-toast.up .ga-toast-t b em { color: var(--green); } .ga-toast.down .ga-toast-t b em { color: var(--red); } .ga-toast-t span { font: 400 13px/1.35 var(--sans); color: var(--muted); } .ga-toast-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: color-mix(in srgb, var(--green) 55%, transparent); transform-origin: 0 50%; animation: ga-toast-left var(--left, 8000ms) linear forwards; } .ga-toast.paused .ga-toast-bar { animation-play-state: paused; } .ga-toast:hover { border-color: var(--muted); } .ga-toast.out { animation: ga-toast-out .26s var(--ease) forwards; } @keyframes ga-toast-in { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } } @keyframes ga-toast-out { to { opacity: 0; transform: translateX(24px); } } @keyframes ga-toast-left { from { transform: scaleX(1); } to { transform: scaleX(0); } } @media (prefers-reduced-motion: reduce) { .ga-toast, .ga-toast.out { animation: none; } } .ga-right { margin-left: auto; display: flex; align-items: center; gap: 12px; } .ga-cash { display: flex; align-items: baseline; gap: 8px; padding: 8px 14px; border-radius: 999px; background: var(--card); border: 1px solid var(--card-edge); } .ga-cash .label { font: 600 11px/1 var(--sans); letter-spacing: .06em; color: var(--muted); } .ga-cash b { font: 600 16px/1 var(--sans); } a.ga-cash { color: inherit; text-decoration: none; } /* a phone's balance pill opens Add USDG (goapp.js cashPill) */ a.ga-cash:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; } .ga-top .btn.sm { border-radius: 999px; } .ga-me { position: relative; } .ga-me-btn { display: flex; align-items: center; gap: 8px; padding: 4px 12px 4px 4px; border-radius: 999px; border: 1px solid var(--card-edge); background: var(--card); color: var(--ink); cursor: pointer; font: 500 14px/1 var(--sans); } .ga-me-btn .me-tree { border-radius: 999px; } .ga-me-menu { position: absolute; right: 0; top: calc(100% + 8px); min-width: 240px; display: none; flex-direction: column; padding: 8px; border-radius: 16px; background: var(--card); border: 1px solid var(--card-edge); box-shadow: 0 18px 40px -20px rgba(0, 0, 0, .45); } .ga-me.open .ga-me-menu { display: flex; } .ga-me-head { display: flex; flex-direction: column; gap: 4px; padding: 8px 10px 10px; border-bottom: 1px solid var(--card-edge); margin-bottom: 4px; } .ga-me-head code { font-size: 12px; color: var(--muted); } .ga-me-menu button, .ga-me-menu a { display: flex; align-items: center; gap: 12px; text-align: left; padding: 10px; border-radius: 10px; border: 0; background: none; color: var(--ink); font: 500 14px/1.2 var(--sans); text-decoration: none; cursor: pointer; } .ga-me-menu button:hover, .ga-me-menu a:hover { background: var(--card-2); } /* each item's pixel icon (goapp.js ICONS), a shade quieter than its words */ .ga-me-menu button > .px-ico, .ga-me-menu a > .px-ico { flex: none; opacity: .78; } /* Hide balances, Show steps and Dark mode: a toggle at the right, on in the app's green */ .ga-me-menu [role="switch"]::after { content: ""; flex: none; margin-left: auto; width: 32px; height: 18px; border-radius: 999px; background: radial-gradient(circle at 9px 50%, #fff 0 6px, transparent 6.5px), color-mix(in srgb, var(--muted) 45%, transparent); transition: background-color .18s var(--ease, ease); } .ga-me-menu [role="switch"][aria-checked="true"]::after { background: radial-gradient(circle at 23px 50%, #fff 0 6px, transparent 6.5px), var(--green); } /* Sign out: last, apart, in the brand's red */ .ga-me-menu a[data-act="out"] { margin-top: 4px; color: var(--red); position: relative; } .ga-me-menu a[data-act="out"]::before { content: ""; position: absolute; left: 10px; right: 10px; top: -3px; border-top: 1px solid var(--card-edge); } .ga-me-menu a[data-act="out"] > .px-ico { opacity: 1; } .ga-menu-btn { display: none; border: 1px solid var(--card-edge); background: var(--card); color: var(--ink); border-radius: 12px; padding: 8px; cursor: pointer; } /* the account page's tabs: one section at a time (account-page.js marks the current ones) */ body.goapp #main.account > section:not(.ga-on) { display: none !important; } body.goapp .acct > .rigbar { margin-bottom: 12px; } /* Agents: your agents, or all of them (account-explore.js) */ .ac-agbar, .ac-explore { display: none; } body.goapp #main.account > .ac-agbar.ga-on { display: flex; margin-bottom: 14px; } body.goapp #main.account > .ac-explore.ga-on { display: block; } #main[data-agview="all"] > #ac-agents, #main[data-agview="all"] > #ac-empty { display: none !important; } #main:not([data-agview="all"]) > #ac-explore { display: none !important; } .ag-switch { position: relative; display: inline-flex; padding: 4px; gap: 2px; border-radius: 999px; background: var(--card); border: 1px solid var(--card-edge); } .ag-switch button { position: relative; padding: 8px 16px; border: 0; border-radius: 999px; background: none; color: var(--muted); font: 600 14px/1 var(--sans); cursor: pointer; transition: color .2s steps(3), background .2s var(--ease); } .ag-switch button:hover { color: var(--ink); } .ag-switch button.on { background: var(--glow); color: var(--ink); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--green) 22%, transparent); } .ex-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 16px; align-items: start; } .ex-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .ex-head h2 .sub { font: 500 13px var(--sans); margin-left: 8px; } .ex-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 12px 0 6px; } .ex-tools .ga-search { flex: 1 1 220px; } .ex-items { display: grid; gap: 6px; margin-top: 8px; } .ex-row { position: relative; display: grid; grid-template-columns: 30px minmax(140px, 1.4fr) minmax(110px, 1fr) 96px 96px 64px; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; background: var(--card-2); color: var(--ink); text-decoration: none; overflow: hidden; animation: ex-in .5s var(--ease) both; animation-delay: calc(var(--i) * 18ms); } .ex-row::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--green); transform: scaleY(0); transform-origin: 50% 100%; transition: transform .24s steps(4); } .ex-row:hover, .ex-row:focus-visible { background: color-mix(in srgb, var(--green) 7%, var(--card-2)); } .ex-row:hover::before, .ex-row:focus-visible::before { transform: scaleY(1); } .ex-rank { font: 500 13px var(--mono, monospace); color: var(--faint, var(--muted)); text-align: right; } .ex-name { display: grid; gap: 4px; min-width: 0; } .ex-nm { font: 600 15px/1.2 var(--sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ex-nm .sub { font: 500 12.5px var(--mono, monospace); color: var(--muted); } .ex-score { display: flex; align-items: center; gap: 8px; } .ex-score b { font: 500 20px/1 var(--serif); color: var(--green); min-width: 36px; font-variant-numeric: tabular-nums; } .ex-score i { flex: 1; height: 5px; border-radius: 999px; background: var(--card); overflow: hidden; } .ex-score s { display: block; height: 100%; background: linear-gradient(90deg, var(--green), var(--green-2)); text-decoration: none; } .ex-num b { display: block; font: 600 14.5px/1.15 var(--sans); font-variant-numeric: tabular-nums; } .ex-num .sub { font-size: 11.5px; white-space: nowrap; } /* what an agent has out right now, a short line under its name */ .ex-st { display: flex; white-space: nowrap; font: 600 12.5px/1.2 var(--sans); } .ex-on { color: var(--brass-ink, var(--brass)); } .ex-idle { color: var(--muted); } .ex-side { position: sticky; top: calc(var(--ga-top) + 16px); max-height: calc(100vh - var(--ga-top) - 40px); overflow: auto; } .ex-feed { list-style: none; margin: 10px 0 0; padding: 0; display: grid; } .ex-ev { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; grid-template-areas: "dot what amt" ". when when"; gap: 2px 10px; padding: 10px 0; border-bottom: 1px solid var(--card-edge); font: 500 13.5px/1.3 var(--sans); animation: ex-in .45s var(--ease) both; } .ex-ev:last-child { border-bottom: 0; } .ex-dot { grid-area: dot; width: 6px; height: 6px; margin-top: 5px; background: var(--muted); } .ex-ev.up .ex-dot { background: var(--green); } .ex-ev.down .ex-dot { background: var(--red); } .ex-what { grid-area: what; min-width: 0; } .ex-what .sub { font: 500 12px var(--mono, monospace); } .ex-amt { grid-area: amt; font-variant-numeric: tabular-nums; } .ex-ev.up .ex-amt { color: var(--green); } .ex-when { grid-area: when; font-size: 12px; color: var(--muted); } @keyframes ex-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .ex-row, .ex-ev { animation: none; } .ex-row::before { transition: none; } } @media (max-width: 1560px) { .ex-row { grid-template-columns: 26px minmax(120px, 1.3fr) minmax(90px, .9fr) 86px 86px; } .ex-line { display: none; } } @media (max-width: 1280px) { .ex-layout { grid-template-columns: minmax(0, 1fr); } .ex-side { position: static; max-height: none; } } @media (max-width: 900px) { .ex-row { grid-template-columns: 26px minmax(0, 1fr) 110px; } .ex-row .ex-num { display: none; } } /* Home: quick doors */ .ga-doors { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; margin: 14px 0 6px; } .ga-door { display: flex; flex-direction: column; gap: 6px; padding: 16px; border-radius: 16px; background: var(--card-2); border: 1px solid var(--card-edge); color: var(--ink); text-decoration: none; } .ga-door:hover { border-color: var(--green); box-shadow: 0 0 0 3px var(--glow); } .ga-door b { font: 600 15px/1.2 var(--sans); display: flex; align-items: center; gap: 8px; } .ga-door b .px-ico { color: var(--green); } .ga-door span { font: 400 13px/1.35 var(--sans); color: var(--muted); } /* the Guide (account.html #ac-guide): Go mode only; a contents box, then one part per feature, in short lines a reader can scan (a readable measure, headings with the sidebar's pixel icons, numbered steps, the five levels as a ladder) */ body:not(.goapp) #ac-guide { display: none; } .gd { --gd-measure: 44em; } .gd p, .gd li { font: 400 15.5px/1.6 var(--sans); color: var(--ink-2); } .gd p { margin: 0 0 10px; max-width: var(--gd-measure); } /* the contents beside the parts: a column that stays in view while the parts scroll (the window scrolls in Go mode, so sticky under the top bar), the part in view marked (account-guide.js: aria-current); on a phone a bar of chips that stays under the top bar and scrolls sideways on its own */ .gd-wrap { display: grid; grid-template-columns: 196px minmax(0, 1fr); gap: 0 36px; align-items: start; margin-top: 16px; } .gd-body { min-width: 0; } .gd-toc { position: sticky; top: calc(var(--ga-top, 64px) + 16px); max-height: calc(100vh - var(--ga-top, 64px) - 32px); overflow-y: auto; padding: 14px 10px 12px; border-radius: 16px; background: var(--card-2); border: 1px solid var(--card-edge); scrollbar-width: thin; } .gd-toc-t { margin: 0 8px 8px; font: 600 12px/1.2 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); } .gd-toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; counter-reset: gd; } .gd-toc li { counter-increment: gd; font-size: 14.5px; } .gd-toc a { position: relative; display: flex; gap: 10px; padding: 7px 8px; border-radius: 10px; color: var(--ink-2); text-decoration: none; line-height: 1.3; transition: background .2s var(--ease), color .2s var(--ease); } .gd-toc a::before { content: counter(gd); min-width: 1.4em; font: 500 12.5px/1.45 var(--mono); color: var(--faint); } .gd-toc a:hover, .gd-toc a:focus-visible { background: var(--glow); color: var(--ink); } .gd-toc a.on { background: var(--card); color: var(--ink); font-weight: 600; box-shadow: inset 3px 0 0 var(--green), 0 0 0 1px var(--card-edge); } .gd-toc a.on::before { color: var(--green); } .gd-body > .gd-sec:first-child { border-top: 0; padding-top: 4px; } .gd-end { height: 1px; } .gd-sec { padding: 22px 0 8px; border-top: 1px solid var(--card-edge); scroll-margin-top: calc(var(--ga-top, 64px) + 12px); } /* the window from the sidebar's fold to a laptop: a narrower column */ @media (max-width: 1100px) and (min-width: 761px) { .gd-wrap { grid-template-columns: 168px minmax(0, 1fr); gap: 0 24px; } .gd-toc li { font-size: 14px; } } @media (max-width: 760px) { .gd-wrap { display: block; margin-top: 8px; } .gd-toc { top: var(--ga-top, 64px); z-index: 5; max-height: none; overflow: visible; margin: 0 -26px 8px; padding: 8px 0; border-radius: 0; border-width: 0 0 1px; background: color-mix(in srgb, var(--card) 92%, transparent); backdrop-filter: blur(8px); } .gd-toc-t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; } .gd-toc ol { display: flex; gap: 6px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; padding: 0 26px; scroll-padding: 0 26px; scrollbar-width: none; } .gd-toc ol::-webkit-scrollbar { display: none; } .gd-toc li { flex: none; scroll-snap-align: center; font-size: 14px; } .gd-toc a { gap: 6px; padding: 7px 12px; border-radius: 999px; white-space: nowrap; background: var(--card-2); box-shadow: inset 0 0 0 1px var(--card-edge); } .gd-toc a.on { background: var(--green); color: var(--card); box-shadow: none; } .gd-toc a.on::before { color: inherit; opacity: .8; } .gd-sec { scroll-margin-top: calc(var(--ga-top, 64px) + 62px); } } @media (prefers-reduced-motion: reduce) { .gd-toc a { transition: none; } } .gd-h { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; font: 400 24px/1.2 var(--serif); letter-spacing: -.01em; color: var(--ink); border-radius: 8px; } .gd-h:focus { outline: none; } .gd-ico { display: inline-grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 10px; background: var(--glow); color: var(--green); } .gd h4 { margin: 18px 0 6px; font: 600 15.5px/1.3 var(--sans); color: var(--ink); } .gd-steps { list-style: none; margin: 0 0 6px; padding: 0; display: grid; gap: 10px; counter-reset: gs; max-width: calc(var(--gd-measure) + 64px); } .gd-steps > li { counter-increment: gs; position: relative; padding: 14px 16px 6px 56px; border-radius: 14px; background: var(--card-2); } .gd-steps > li::before { content: counter(gs); position: absolute; left: 16px; top: 13px; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 999px; background: var(--green); color: var(--card); font: 600 13.5px/1 var(--sans); } .gd-steps > li > b { display: block; margin: 2px 0 6px; font: 600 15.5px/1.3 var(--sans); color: var(--ink); } .gd-steps p { margin-bottom: 8px; } .gd-rungs { list-style: none; margin: 4px 0 14px; padding: 0; display: grid; gap: 6px; counter-reset: gr -1; max-width: var(--gd-measure); } .gd-rungs li { counter-increment: gr; position: relative; padding: 9px 12px 9px 46px; border-radius: 12px; background: var(--card-2); line-height: 1.45; } .gd-rungs li::before { content: counter(gr); position: absolute; left: 12px; top: 9px; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 6px; background: var(--glow); color: var(--green); font: 600 12.5px/1 var(--mono); } .gd-rungs li:nth-child(1)::before { background: var(--card); color: var(--muted); box-shadow: inset 0 0 0 1px var(--card-edge); } .gd-rungs li:nth-child(5)::before { background: var(--green); color: var(--card); } .gd-list { margin: 0 0 10px; padding-left: 20px; max-width: var(--gd-measure); } .gd-list li { margin: 0 0 6px; } .gd-list li::marker { color: var(--green); } .gd-go { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 10px; } .gd-pt { margin-top: 4px; } .gd-faq details { border-bottom: 1px solid var(--card-edge); max-width: var(--gd-measure); } .gd-faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; font: 600 15.5px/1.35 var(--sans); color: var(--ink); } .gd-faq summary::-webkit-details-marker { display: none; } .gd-faq summary::after { content: "+"; color: var(--muted); font: 400 20px/1 var(--sans); transition: transform .2s var(--ease); } .gd-faq details[open] summary::after { transform: rotate(45deg); } .gd-faq details p { margin: 0 0 14px; } .gd-faq .ga-note { margin-top: 14px; } @media (prefers-reduced-motion: reduce) { .gd-faq summary::after { transition: none; } } /* the Guide's figures (account.html .gd-fig): drawn with the page's own tokens (both themes), the sidebar's pixel icons and the trees; each is one picture for a screen reader (role="img" and its words in aria-label) */ .gd-fig { margin: 18px 0 16px; padding: 18px; max-width: calc(var(--gd-measure) + 64px); border-radius: 16px; background: var(--card-2); border: 1px solid var(--card-edge); color: var(--ink); } .gd-fig .px-ico { display: block; } .gd-fig-t { display: block; font: 600 13px/1.3 var(--sans); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); } .gd .gd-cap { font-size: 14px; line-height: 1.5; color: var(--muted); } .gd-fig .gd-cap { margin: 12px 0 0; } .gd-node { display: inline-grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 10px; background: var(--card); color: var(--green); box-shadow: inset 0 0 0 1px var(--card-edge); } .gd-node .px-ico { width: 18px; height: 18px; } .gd-legend { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px; } .gd .gd-legend li { display: flex; align-items: baseline; gap: 10px; font-size: 14px; line-height: 1.45; } .gd-k { flex: none; width: 12px; height: 12px; border-radius: 3px; transform: translateY(1px); } /* the loop: six steps round a ring, the record in its middle */ .gd-wheel { position: relative; width: 100%; max-width: 460px; aspect-ratio: 1 / 1.02; padding: 0; box-sizing: border-box; background: radial-gradient(closest-side, var(--glow), transparent 70%), var(--card-2); } .gd-wheel-ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; } .gd-wheel-ring circle { fill: none; stroke: var(--card-edge); stroke-width: 1.4; stroke-dasharray: 2 2.2; } .gd-wheel-arrows polyline { fill: none; stroke: var(--green); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; } .gd-wheel-spin { fill: var(--green); transform-box: view-box; transform-origin: 50% 50%; animation: gd-spin 14s linear infinite; } @keyframes gd-spin { to { transform: rotate(360deg); } } .gd-wheel-hub { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 34%; display: grid; justify-items: center; gap: 6px; text-align: center; } .gd-wheel-hub b { font: 400 17px/1.15 var(--serif); color: var(--ink); } .gd-wheel-tree { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: var(--green); color: var(--card); } .gd-wheel-tree .px-ico { width: 30px; height: 30px; } .gd-wheel-steps { list-style: none; margin: 0; padding: 0; } .gd .gd-wheel-steps li { position: absolute; width: 31%; transform: translate(-50%, -18px); display: grid; justify-items: center; gap: 4px; text-align: center; font: 500 13.5px/1.25 var(--sans); color: var(--ink); } .gd-wheel-steps li:nth-child(1) { left: 50%; top: 16%; } .gd-wheel-steps li:nth-child(2) { left: 79.4%; top: 33%; } .gd-wheel-steps li:nth-child(3) { left: 79.4%; top: 67%; } .gd-wheel-steps li:nth-child(4) { left: 50%; top: 84%; } .gd-wheel-steps li:nth-child(5) { left: 20.6%; top: 67%; } .gd-wheel-steps li:nth-child(6) { left: 20.6%; top: 33%; } .gd-wheel-steps .gd-node { animation: gd-pulse 14s ease-in-out infinite; animation-delay: calc(var(--d, 0) * 14s / 6 - 1.2s); } .gd-wheel-steps li:nth-child(2) .gd-node { --d: 1; } .gd-wheel-steps li:nth-child(3) .gd-node { --d: 2; } .gd-wheel-steps li:nth-child(4) .gd-node { --d: 3; } .gd-wheel-steps li:nth-child(5) .gd-node { --d: 4; } .gd-wheel-steps li:nth-child(6) .gd-node { --d: 5; } @keyframes gd-pulse { 0%, 14%, 100% { box-shadow: inset 0 0 0 1px var(--card-edge); } 6% { box-shadow: inset 0 0 0 2px var(--green), 0 0 0 4px var(--glow); } } /* the five levels: a stair, a tree on each step */ .gd-stair ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; align-items: end; } .gd .gd-stair li { display: grid; justify-items: center; gap: 6px; text-align: center; font: 600 13px/1.2 var(--sans); color: var(--ink); overflow-wrap: break-word; hyphens: manual; } .gd-stair li > i { display: block; width: 100%; height: calc(10px + var(--h) * 14px); border-radius: 8px 8px 3px 3px; background: linear-gradient(var(--green), var(--green-2)); opacity: calc(.35 + var(--h) * .16); } .gd-stair li:nth-child(1) { --h: 0; --s: .5; } .gd-stair li:nth-child(2) { --h: 1; --s: .62; } .gd-stair li:nth-child(3) { --h: 2; --s: .76; } .gd-stair li:nth-child(4) { --h: 3; --s: .9; } .gd-stair li:nth-child(5) { --h: 4; --s: 1; } .gd-tree { display: grid; place-items: end center; width: 100%; max-width: 80px; aspect-ratio: 1; color: var(--green); } .gd-tree .px-ico { width: calc(44px * var(--s)); height: calc(44px * var(--s)); } .gd-tree img { width: 100%; height: auto; transform: scale(var(--s)); transform-origin: 50% 100%; } /* a loan, day by day */ .gd-fig-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 14px; margin-bottom: 18px; } .gd-terms { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--card); box-shadow: inset 0 0 0 1px var(--card-edge); } .gd-term { border: 0; background: none; padding: 6px 12px; border-radius: 999px; font: 500 13.5px/1.2 var(--sans); color: var(--ink-2); cursor: pointer; } .gd-term[aria-pressed="true"] { background: var(--green); color: var(--card); } .gd-term:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; } .gd-loan-fig { position: relative; padding: 26px 0 0; } .gd-pins { position: absolute; inset: 0 0 auto; height: 22px; } .gd-pin { position: absolute; top: 0; font: 600 12.5px/1.2 var(--sans); color: var(--ink); white-space: nowrap; transition: left .35s var(--ease); } .gd-pin::after { content: ""; position: absolute; left: 0; top: 17px; width: 2px; height: 14px; background: var(--ink); border-radius: 1px; } .gd-pin-due { transform: translateX(-50%); } .gd-pin-due::after { left: calc(50% - 1px); } .gd-loan-bar { display: flex; height: 18px; border-radius: 6px; overflow: hidden; gap: 2px; } .gd-z { display: block; min-width: 0; transition: width .35s var(--ease); } .gd-z-early { background: color-mix(in srgb, var(--green) 30%, var(--card)); } .gd-z-week { background: var(--green); } .gd-z-grace { background: var(--brass); } .gd-z-late { background: repeating-linear-gradient(135deg, var(--red) 0 4px, color-mix(in srgb, var(--red) 55%, var(--card)) 4px 8px); } .gd-ticks { position: relative; height: 22px; margin-top: 4px; font: 500 12px/1.2 var(--mono); color: var(--muted); } .gd-ticks span { position: absolute; top: 4px; transform: translateX(-50%); transition: left .35s var(--ease); } .gd-ticks span[style*="left:0%"] { transform: none; } .gd-ticks span[style*="left:100%"] { transform: translateX(-100%); } .gd-axis { display: block; font: 400 12px/1.3 var(--sans); color: var(--muted); } /* the pool: the flow, the fee's split, a default's order */ .gd-flow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; counter-reset: gf; } .gd .gd-flow li { position: relative; display: grid; justify-items: center; gap: 6px; text-align: center; font: 500 13.5px/1.3 var(--sans); color: var(--ink); } .gd-flow li + li::before { content: ""; position: absolute; left: -18px; top: 13px; width: 10px; height: 10px; border: solid var(--green); border-width: 2px 2px 0 0; transform: rotate(45deg); } .gd-split { margin-top: 20px; padding-top: 16px; border-top: 1px dashed var(--card-edge); } .gd-split-bar { display: flex; gap: 2px; height: 18px; margin-top: 10px; border-radius: 6px; overflow: hidden; background: repeating-linear-gradient(135deg, var(--card-edge) 0 6px, var(--card) 6px 12px); } .gd-split-bar:not(.read) i { display: none; } .gd-split-bar i { display: block; min-width: 0; transition: width .5s var(--ease); } .gd-split [data-part="lenders"] { background: var(--green); } .gd-split [data-part="sponsor"] { background: var(--brass); } .gd-split [data-part="reserve"] { background: color-mix(in srgb, var(--ink) 55%, var(--card)); } .gd-split-legend b { margin-left: auto; font: 500 13.5px/1.45 var(--sans); color: var(--muted); } .gd-pool.read .gd-split-legend b { font: 600 14px/1.45 var(--mono); color: var(--ink); } .gd-split-legend b[data-split] { white-space: nowrap; } .gd-loss { margin-top: 18px; padding-top: 16px; border-top: 1px dashed var(--card-edge); } .gd-loss ol { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; counter-reset: gl; } .gd .gd-loss li { counter-increment: gl; display: flex; align-items: flex-start; gap: 8px; padding: 10px; border-radius: 12px; background: var(--card); box-shadow: inset 0 0 0 1px var(--card-edge); font: 500 13.5px/1.3 var(--sans); color: var(--ink); } .gd-loss li::before { content: counter(gl); flex: none; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; background: var(--red-soft); color: var(--red); font: 600 12px/1 var(--mono); } /* backing: a value bar for stock tokens, the seat's line */ .gd-backing { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 28px; } .gd-bk { min-width: 0; } .gd-bk + .gd-bk { padding-left: 28px; border-left: 1px dashed var(--card-edge); } .gd-bk-h { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; font: 600 15px/1.3 var(--sans); } .gd-val-bar { position: relative; height: 18px; border-radius: 6px; background: var(--card); box-shadow: inset 0 0 0 1px var(--card-edge); overflow: hidden; } .gd-val-bar i { position: absolute; top: 0; bottom: 0; } .gd-val-base { left: 0; width: 25%; background: var(--green); } .gd-val-range { left: 25%; width: 25%; background: linear-gradient(90deg, var(--green), color-mix(in srgb, var(--green) 35%, var(--card))); } .gd-val-plus { left: 50%; width: 20%; background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--green) 45%, var(--card)) 0 4px, var(--card) 4px 8px); } .gd-k-base { background: var(--green); } .gd-k-plus { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--green) 45%, var(--card)) 0 3px, var(--card) 3px 6px); box-shadow: inset 0 0 0 1px var(--card-edge); } .gd-seat { display: flex; align-items: center; gap: 10px; min-height: 44px; } .gd-seat-a, .gd-seat-b { padding: 8px 14px; border-radius: 10px; font: 600 14px/1.2 var(--sans); } .gd-seat-a { background: var(--card); color: var(--ink); box-shadow: inset 0 0 0 1px var(--card-edge); } .gd-seat-b { background: var(--green); color: var(--card); } .gd-seat-arrow { flex: 1 1 40px; max-width: 90px; height: 10px; fill: none; stroke: var(--green); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } @media (max-width: 760px) { .gd-fig { padding: 14px; } .gd-wheel { padding: 0; } .gd .gd-wheel-steps li { font-size: 12.5px; width: 30%; } /* the arrows at three and nine o'clock would sit under the side steps' words: the other four show the way round */ .gd-wheel-arrows polyline:nth-child(2), .gd-wheel-arrows polyline:nth-child(5) { display: none; } .gd-wheel-hub b { font-size: 15px; } .gd-wheel-tree { width: 42px; height: 42px; } .gd-flow { gap: 16px; } .gd-flow li + li::before { left: -14px; } .gd .gd-flow li, .gd .gd-loss li { font-size: 13px; } .gd-loss ol { grid-template-columns: 1fr; } .gd-backing { grid-template-columns: 1fr; } .gd-bk + .gd-bk { padding: 16px 0 0; border-left: 0; border-top: 1px dashed var(--card-edge); } .gd-stair ol { gap: 3px; } .gd .gd-stair li { font-size: 10.5px; letter-spacing: -.01em; } } @media (prefers-reduced-motion: reduce) { .gd-wheel-spin, .gd-wheel-steps .gd-node { animation: none; } .gd-pin, .gd-z, .gd-ticks span, .gd-split-bar i { transition: none; } } @media (max-width: 520px) { .gd-h { font-size: 22px; } .gd-steps > li { padding-left: 48px; } .gd-steps > li::before { left: 12px; } } /* shared bits of the new tabs */ .ga-list { display: grid; gap: 8px; margin: 10px 0; } .ga-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 12px 14px; border-radius: 14px; background: var(--card-2); } .ga-row .grow { flex: 1 1 200px; min-width: 0; } .ga-row b { font: 600 15px/1.2 var(--sans); } .ga-row .sub { display: block; } .ga-chip { font: 600 11px/1 var(--sans); letter-spacing: .04em; padding: 5px 8px; border-radius: 999px; background: var(--glow); color: var(--green); } .ga-chip.warn { background: var(--red-soft); color: var(--red); } .ga-note { font: 400 13px/1.45 var(--sans); color: var(--muted); } .ga-empty { padding: 16px; border-radius: 14px; border: 1px dashed var(--card-edge); color: var(--muted); font: 400 14px/1.45 var(--sans); } /* a phone: the sidebar slides in from the menu button */ @media (max-width: 860px) { body.goapp { --ga-side: 0px; --ga-gutter: 16px; } body.goapp > main { margin: 0; padding: 16px 16px 72px; } /* closed, it is out of the Tab order and of screen readers too, not only off screen */ .ga-side { width: 272px; transform: translateX(-102%); visibility: hidden; transition: transform .2s var(--ease, ease), visibility .2s; box-shadow: 0 0 40px rgba(0, 0, 0, .35); } /* opening, it shows at once (the focus moves into it); shutting, it stays visible while it slides away */ .ga-side.open { transform: none; visibility: visible; transition: transform .2s var(--ease, ease); } /* open, the page behind it dims; a tap there lands on the body, so it only shuts the sidebar (goapp.js) */ body.goapp.ga-drawer::after { content: ""; position: fixed; inset: 0; z-index: 35; background: rgba(0, 0, 0, .35); } .ga-top { padding: 0 12px; gap: 10px; } .ga-menu-btn { display: inline-flex; } .ga-title { font-size: 21px; } .ga-me-name, .ga-cash .label { display: none; } .ga-add { display: none; } .ga-cash { padding: 7px 12px; } } @media (prefers-reduced-motion: reduce) { .ga-side, .ga-side.open { transition: none; } } /* The Go pages draw to the screen's edges (viewport-fit=cover: Go mode installed as an app, web/manifest.webmanifest): what flows keeps clear of a notch and the rounded corners of a phone held sideways, and the sidebar (a drawer on a phone), the sign-in screen's foot and the tab bar (launch-shell.css) keep clear of the home indicator. Every inset is 0 on a screen without them, so nothing moves there. */ html[data-go-page] body { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); } html[data-go-page] .ga-side { padding-left: max(14px, env(safe-area-inset-left)); padding-bottom: max(18px, env(safe-area-inset-bottom)); } html[data-go-page] #ac-in.gt .gt-wrap { padding-bottom: calc(40px + env(safe-area-inset-bottom)); } @media (max-width: 640px) { html[data-go-page] #ac-in.gt .gt-wrap { padding-bottom: calc(32px + env(safe-area-inset-bottom)); } } .acct .ga-h { margin: 18px 0 4px; font: 600 13px/1.2 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); } .sk-buy { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 18px; margin: 0 0 18px; padding: 14px 18px; border-radius: 18px; background: var(--card); border: 1px solid var(--card-edge); font: 400 14px/1.45 var(--sans); color: var(--muted); } .sk-buy b { color: var(--ink); } .sk-buy .row { margin: 0; gap: 8px; } body.goapp .st-tabs, body.goapp #st-build-pane { display: none !important; } .go-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 0 0 18px; padding: 14px 18px; border-radius: 18px; background: var(--glow); border: 1px solid color-mix(in srgb, var(--green) 35%, transparent); color: var(--ink); text-decoration: none; font: 400 14.5px/1.4 var(--sans); } .go-cta:hover { border-color: var(--green); box-shadow: 0 0 0 3px var(--glow); } .go-cta-tag { font: 600 11px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--paper); background: var(--green); border-radius: 999px; padding: 6px 9px; } .go-cta-txt { flex: 1 1 260px; color: var(--muted); } .go-cta-txt b { color: var(--ink); } .go-cta-arr { font-weight: 600; color: var(--green); white-space: nowrap; } html[data-signed-in] .go-cta-new { display: none; } /* signed in (me.js): no sign-in to offer */ /* ---- Go mode, round 2: the in-tab stock flow, the agents list, the score, help, the withdrawal steps, polish ---- */ body.goapp .acct .panel { padding: 8px 26px 22px; border-radius: 20px; } body.goapp .acct .panel > header { padding: 18px 0 10px; } body.goapp .acct .panel > header h2 { font-size: 26px; } body.goapp .acct .panel > header .sub { font-size: 14.5px; } .ga-banner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 18px; margin: 8px 0 6px; padding: 14px 16px; border-radius: 16px; background: var(--card-2); border: 1px solid var(--card-edge); font: 400 14px/1.45 var(--sans); color: var(--muted); } .ga-banner b { color: var(--ink); } .ga-banner .row { margin: 0; gap: 8px; } .ga-h-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin: 18px 0 8px; } .ga-h-row .ga-h { margin: 0; } .ga-search { max-width: 280px; padding: 10px 14px !important; font-size: 14.5px !important; } .ga-table td, .ga-table th { vertical-align: middle; } .ga-acts { display: inline-flex; gap: 6px; } .ga-row .sk-logo { flex: none; } .ga-sheet { margin: 14px 0; padding: 16px 18px; border-radius: 18px; border: 1px solid var(--green); background: var(--card-2); box-shadow: 0 0 0 4px var(--glow); } .ga-sheet-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; } .ga-sheet-head h3 { margin: 0; font: 500 22px/1.1 var(--serif); } /* the Backing tab's deposit sheet: the token's logo beside its name, and its name, price and LTV under it */ #as-dep { scroll-margin-top: calc(var(--ga-top, 64px) + 12px); } #as-dep .ga-sheet-head h3 { display: flex; align-items: center; gap: 10px; min-width: 0; } #as-dep .ga-sheet-head h3:focus { outline: none; } #as-dep .ga-sheet-head .sk-logo { flex: none; width: 34px; height: 34px; } .as-dep-tok { margin: -2px 0 12px; font: 400 13.5px/1.4 var(--sans); color: var(--muted); } .ga-sheet-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 8px; } .ga-sheet-grid label { display: grid; gap: 6px; font: 600 12px/1 var(--sans); letter-spacing: .04em; color: var(--muted); } .ga-sheet-grid label .row { margin: 0; } .ga-sheet-grid .sub { font-weight: 400; letter-spacing: 0; } /* agents: the chosen card and its score on the left, the list on the right */ .ag-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 18px; align-items: start; } .ag-main { display: grid; gap: 18px; min-width: 0; } .ag-list { position: sticky; top: calc(var(--ga-top, 64px) + 16px); display: flex; flex-direction: column; gap: 10px; max-height: calc(100vh - var(--ga-top, 64px) - 40px); padding: 16px !important; } .ag-list-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .ag-list-head b { font: 500 20px/1 var(--serif); } .ag-list .ga-search { max-width: none; } .ag-chips { display: flex; flex-wrap: wrap; gap: 6px; } .ag-chip { border: 1px solid var(--card-edge); background: var(--card-2); color: var(--ink); border-radius: 999px; padding: 6px 11px; font: 500 12.5px/1 var(--sans); cursor: pointer; } .ag-chip.on { background: var(--green); border-color: var(--green); color: var(--paper); } .ag-sort { display: flex; align-items: center; gap: 8px; font: 500 12.5px/1 var(--sans); color: var(--muted); } .ag-sort select { padding: 7px 10px !important; font-size: 13px !important; border-radius: 10px !important; } .ag-items { display: grid; gap: 6px; overflow-y: auto; padding-right: 2px; } .ag-item { display: grid; gap: 4px; text-align: left; padding: 11px 12px; border-radius: 14px; border: 1px solid transparent; background: var(--card-2); color: var(--ink); cursor: pointer; font: inherit; } .ag-item:hover { border-color: var(--card-edge); } .ag-item:has(.ag-item-tree) { grid-template-columns: 44px minmax(0, 1fr); column-gap: 12px; } .ag-item:has(.ag-item-tree) > :not(.ag-item-tree) { grid-column: 2; } .ag-item-tree { grid-column: 1; grid-row: 1 / span 3; align-self: center; width: 44px; height: 44px; border-radius: 12px; overflow: hidden; background: radial-gradient(70% 60% at 50% 45%, var(--green-soft), transparent 75%), var(--paper-3); } .ag-item-tree img { width: 100%; height: 100%; display: block; } .ag-item-tree img:not([src]) { visibility: hidden; } html[data-hide-trees] .ag-item:has(.ag-item-tree) { grid-template-columns: minmax(0, 1fr); } html[data-hide-trees] .ag-item:has(.ag-item-tree) > :not(.ag-item-tree) { grid-column: 1; } .ag-item.on { border-color: var(--green); box-shadow: 0 0 0 3px var(--glow); } .ag-item-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .ag-item-top b { font: 600 14.5px/1.2 var(--sans); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ag-item-sub { font: 400 12.5px/1.3 var(--sans); color: var(--muted); } .ag-item-due { font: 600 12px/1.2 var(--sans); color: var(--brass-ink); } .ag-item-due.r { color: var(--red); } .ag-score > header h2 { display: flex; align-items: baseline; gap: 10px; } .ag-big { font: 500 40px/1 var(--serif); color: var(--green); } /* the score's parts (sc-: the site's .ag-bar is the home page's decorative bar, animated for ever) */ .sc-bars { display: grid; gap: 10px; margin: 10px 0 14px; } .sc-bar { display: grid; grid-template-columns: 170px minmax(0, 1fr) 70px; align-items: center; gap: 12px; font: 500 13.5px/1.2 var(--sans); cursor: help; } .sc-bar-t { height: 8px; border-radius: 999px; background: var(--card-2); overflow: hidden; } .sc-bar-t i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--green), var(--green-2)); transform-origin: 0 50%; } .sc-bar-v { text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; } @keyframes sc-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } } @media (prefers-reduced-motion: no-preference) { .sc-grow .sc-bar-t i { animation: sc-grow .9s var(--ease) both; } .sc-grow .sc-bar:nth-child(2) i { animation-delay: .06s; } .sc-grow .sc-bar:nth-child(3) i { animation-delay: .12s; } .sc-grow .sc-bar:nth-child(4) i { animation-delay: .18s; } .sc-grow .sc-bar:nth-child(5) i { animation-delay: .24s; } .sc-grow .sc-bar:nth-child(6) i { animation-delay: .3s; } } .st-have { margin: 12px 0 0; } .ag-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); } /* help */ .ga-help { padding: 18px 0 6px; border-bottom: 1px solid var(--card-edge); margin-bottom: 4px; } .ga-help h3 { margin: 0 0 4px; font: 500 26px/1.1 var(--serif); } /* take it out: three steps */ .wd-steps { list-style: none; margin: 8px 0 12px; padding: 0; display: grid; gap: 14px; } .wd-step { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 14px; padding: 16px; border-radius: 18px; background: var(--card-2); } .wd-n { width: 30px; height: 30px; border-radius: 999px; display: grid; place-items: center; background: var(--green); color: var(--paper); font: 600 14px/1 var(--sans); } .wd-body { min-width: 0; } .wd-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; } .wd-h h3 { margin: 0; font: 500 21px/1.1 var(--serif); } .wd-asset { background: var(--card) !important; } .wd-amt { width: 160px; text-align: right; padding: 9px 12px !important; } .wd-dest { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 8px; } #ac-wd-set input { flex: 1 1 320px; min-width: 0; } .wd-review { padding: 14px; border-radius: 14px; background: var(--card); border: 1px dashed var(--card-edge); font: 400 14.5px/1.5 var(--sans); margin-bottom: 12px; } .wd-sum { list-style: none; margin: 0 0 6px; padding: 0; display: grid; gap: 4px; font-size: 16px; } .wd-review .r { color: var(--red); } @media (max-width: 1100px) { .ag-layout { grid-template-columns: minmax(0, 1fr); } .ag-list { position: static; max-height: none; order: -1; } .ag-items { max-height: 320px; } } @media (max-width: 640px) { .ga-sheet-grid { grid-template-columns: 1fr; } .sc-bar { grid-template-columns: 110px minmax(0, 1fr) 56px; font-size: 12.5px; } .ag-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } .wd-amt { width: 110px; } .wd-step { grid-template-columns: minmax(0, 1fr); } .wd-n { display: none; } } /* the Agents tab's own layout replaces the old grid of cards */ .ac-agents { display: block; } #ag-cards > article[hidden] { display: none; } /* the agent path (account-path.js): a card's Next step, the chosen agent's Steps and Scores, Home's Next steps, and Help's points per action */ .ac-next .label { font: 600 11.5px/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; } .ac-next p { margin: 0; } .ac-next p.r { color: var(--red); } .ac-next-bar, .pa-prog { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; } .ac-next-bar .sub, .pa-prog .sub { font-size: 12.5px; color: var(--muted); white-space: nowrap; } /* the bar's track, seen on the card and on a step's card-2 in both themes (paper-3 is near both in dark) */ .ac-next-bar .ac-bar, .pa-prog .ac-bar { background: color-mix(in srgb, var(--muted) 35%, transparent); } /* the Steps header: its title, then How the score works and Hide steps together at the right (wrapped, still at the right), its line under them; Home's Next steps holds Agents and Hide steps the same way */ .ag-path > header .sub { order: 1; flex-basis: 100%; } .ag-path > header .pa-acts, .hm-next > header .pa-acts { margin-left: auto; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: flex-end; gap: 4px 12px; } .ag-path > header .pa-acts .k { font-size: 13.5px; } .ag-path > header > .ac-link { margin-left: auto; } .ag-path > .ga-note { margin: 0 0 8px; } .pa-steps { gap: 10px; } .pa-steps .wd-h { margin-bottom: 4px; } .pa-steps .wd-h h3 { font-size: 18px; } .pa-steps .ac-pill { white-space: nowrap; flex: none; } /* the title wraps, not the pill (pt: "Em andamento") */ .pa-steps .wd-body > .sub { display: block; margin: 4px 0 0; color: var(--ink-2); font-size: 14px; line-height: 1.45; } .pa-steps .ga-row { background: var(--card); } /* a row on a step's own card-2 */ .pa-steps .ga-row .sub + .sub { margin-top: 2px; } .pa-steps .pa-go { margin-top: 10px; } /* a step's way there: the tab or the card where it is done */ .wd-step.pa-done { padding: 10px 16px; } .wd-step.pa-off { background: transparent; border: 1px dashed var(--card-edge); } .wd-step.pa-off .wd-n { background: var(--paper-3); color: var(--ink-2); } .pa-conds { list-style: none; margin: 6px 0; padding: 0; display: grid; gap: 4px; } .pa-conds li { display: flex; gap: 8px; font-size: 14px; } .pa-conds li::before { content: "○"; color: var(--muted); } .pa-conds li.ok::before { content: "✓"; color: var(--green); } .pa-conds li span { flex: 1; } .pa-conds b { font-weight: 500; font-variant-numeric: tabular-nums; } a.ga-row.pa-do { color: var(--ink); text-decoration: none; border: 1px solid transparent; } a.ga-row.pa-do:hover, a.ga-row.pa-do:focus-visible { border-color: var(--green); box-shadow: 0 0 0 3px var(--glow); } a.ga-row.pa-do i { font: 600 17px/1 var(--sans); font-style: normal; color: var(--green); } .acct .sk-figs.sc-tot { grid-template-columns: repeat(2, minmax(0, 1fr)); } .acct .sk-figs.sc-tot b { font: 500 34px/1 var(--serif); color: var(--green); } .acct .sk-figs.sc-tot b .sub { display: inline; margin-left: 6px; font: 500 13px/1 var(--sans); } .sc-tot .sub { display: block; font-size: 13px; color: var(--muted); } .sc-v1 { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 6px 0 0; font-size: 12.5px; color: var(--muted); } .sc-v1 > div { display: flex; gap: 4px; } .sc-v1 dd { margin: 0; color: var(--ink-2); font-variant-numeric: tabular-nums; } .sc-how { grid-column: 1 / -1; margin: -4px 0 2px; font: 400 12.5px/1.4 var(--sans); color: var(--muted); } .sc-bar:not([title]) { cursor: default; } .ag-score .sc-next { margin: 0 0 10px; color: var(--ink-2); } .hm-next { margin: 14px 0 0; } .hm-next[hidden] { display: none; } .hm-next > header { flex-wrap: wrap; row-gap: 4px; } .hm-next > header .ac-link { font-size: 13px; white-space: nowrap; } /* one line: its underline never runs through a second */ .hm-next .hm-list { gap: 8px; } .hm-next .ap-act .sub.r { color: var(--red); } /* steps you can move past (account-path.js): the current step with where it is, Back and Next; a skipped one, dashed, with Reopen; a done one, one quiet line; all done or skipped, a short line with the way back */ .st-item { display: grid; gap: 6px; } .st-item.st-now > .ap-act { border-color: color-mix(in srgb, var(--green) 50%, var(--card-edge)); background: color-mix(in srgb, var(--green) 6%, var(--card)); } .st-item.st-skipped > .ap-act { border-style: dashed; background: transparent; } .st-item.st-skipped > .ap-act b, .st-item.st-skipped > .ap-act .sub { color: var(--muted); } .st-at { font: 500 12.5px/1.2 var(--sans); color: var(--muted); font-variant-numeric: tabular-nums; } .st-skip { display: inline-flex; align-items: center; gap: 10px; flex: none; } .st-skip .ac-pill { margin-left: 0; } .st-item > .st-skip { padding: 0 2px; } .st-skip .ac-link { font-size: 13px; } .st-done .st-row { display: flex; align-items: center; gap: 10px; padding: 8px 16px; border-radius: 14px; border: 1px dashed var(--card-edge); } .st-done .st-row b { font: 500 14px/1.2 var(--sans); color: var(--muted); } .st-fin { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; padding: 12px 16px; border-radius: 14px; background: var(--green-soft); } .st-fin p { margin: 0; font: 500 14.5px/1.4 var(--sans); color: var(--ink); } .ag-path .st-fin { margin: 8px 0 12px; } .wd-step.pa-skipped { background: transparent; border: 1px dashed var(--card-edge); } .wd-step.pa-skipped .wd-n { background: var(--paper-3); color: var(--ink-2); } /* the controls in the card's header, beside its links: where it is, Previous, Next (wrapping under the title on a phone) */ .st-nav { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; } .st-nav .ac-link { font-size: 13px; white-space: nowrap; } .ag-path > header .st-nav .ac-link { font-size: 13.5px; } .st-nav .st-at { white-space: nowrap; } #hm-next-nav:empty { display: none; } /* a phone: the title and its links on the first row, the step controls on their own row under them */ @media (max-width: 640px) { .hm-next > header .pa-acts, .ag-path > header .pa-acts { display: contents; } .hm-next > header .pa-acts > .k, .ag-path > header .pa-acts > .k { margin-left: auto; } .hm-next > header .st-nav, .ag-path > header .st-nav { order: 1; flex-basis: 100%; } .ag-path > header .sub { order: 2; } #hm-next-nav { order: 1; flex-basis: 100%; } #hm-next-nav .st-nav { flex-basis: auto; } } /* Home's hints (account-page.js): a pixel (i) beside a figure or a card's title, and what it is, under it */ .hint-of { display: inline-flex; align-items: center; gap: 4px; } .acct .sk-hero .label.hint-of { display: flex; } .hint-btn { position: relative; flex: none; display: inline-grid; place-items: center; width: 22px; height: 22px; margin: -4px 0; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--faint); cursor: pointer; } .hint-btn::before { content: ""; position: absolute; inset: -11px; } /* a 44 px target for a finger */ .hint-btn:hover, .hint-btn[aria-expanded="true"] { color: var(--green); } .hint-btn:focus-visible { outline: 2px solid var(--green); outline-offset: 1px; } .hint-i { font: 700 11px/1 var(--sans); } .hint-pop { position: fixed; z-index: 60; display: block; box-sizing: border-box; max-width: calc(100vw - 32px); padding: 10px 12px; border-radius: 12px; background: var(--card); border: 1px solid var(--card-edge); box-shadow: 0 10px 28px var(--shade); font: 400 13.5px/1.45 var(--sans); color: var(--ink-2); text-transform: none; letter-spacing: normal; text-align: left; white-space: normal; } .hint-pop[hidden] { display: none; } /* a hint with a name (the Repay step's timeline: account-launchpad.js): its name, then what it means */ .hint-pop .hint-t { display: block; margin-bottom: 2px; font: 600 13.5px/1.35 var(--sans); color: var(--ink); } /* what needs attention (goapp.js, account-alerts.js): a count on a sidebar tab, a dot on the phone's menu button, and the notice at the top of the tab */ .ga-tab > .ga-badge, .ga-tab:hover > .ga-badge, .ga-tab:focus-visible > .ga-badge { margin-left: auto; transform: none; } .ga-tab > .ga-badge::after, .ga-tab > .ga-badge-t::after { display: none; } .ga-tab > .ga-badge-t { position: absolute; } .ga-badge { min-width: 20px; height: 20px; padding: 0 6px; box-sizing: border-box; border-radius: 999px; display: inline-grid; place-items: center; font: 600 11.5px/1 var(--sans); font-variant-numeric: tabular-nums; background: var(--green); color: var(--paper); } .ga-badge.r { background: var(--red); } .ga-badge[hidden] { display: none; } .ga-menu-btn { position: relative; } .ga-menu-btn.ga-dot::after { content: ""; position: absolute; top: 4px; right: 4px; width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 2px var(--card); } .ga-menu-btn.ga-dot.r::after { background: var(--red); } @media (prefers-reduced-motion: no-preference) { .ga-badge:not([hidden]), .ga-menu-btn.ga-dot::after { animation: ga-badge-in .4s steps(4) both; } } @keyframes ga-badge-in { from { opacity: 0; } } .ga-notice { position: relative; margin: 0 0 14px; padding: 12px 48px 12px 16px; border-radius: 16px; background: var(--card); border: 1px solid color-mix(in srgb, var(--green) 35%, var(--card-edge)); } .ga-notice:has(li.r) { border-color: color-mix(in srgb, var(--red) 45%, var(--card-edge)); } .ga-notice-h { display: block; margin-bottom: 8px; font: 600 11.5px/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); } .ga-notice-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .ga-notice-list li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 14px; font: 400 14.5px/1.45 var(--sans); color: var(--ink-2); } .ga-notice-list li + li { padding-top: 8px; border-top: 1px solid var(--rule-2); } .ga-notice-list li.r .ga-notice-t { color: var(--red); } .ga-notice-t { flex: 1 1 240px; min-width: 0; } .ga-notice-t b { color: var(--ink); font-weight: 600; } .ga-notice-list li.r .ga-notice-t b { color: inherit; } .ga-notice-x { position: absolute; top: 6px; right: 6px; width: 36px; height: 36px; border: 0; border-radius: 10px; background: none; color: var(--muted); font: 400 22px/1 var(--sans); cursor: pointer; } .ga-notice-x:hover { color: var(--ink); background: var(--hover); } /* the notifications (account-notify.js): a bell at the bottom right with a count, and its panel above it. Clear of the page's last buttons (main's foot grows by the bell's height), above a phone's home bar (safe-area), and gone while the phone's sidebar is open. The corner's notes (toasts) sit above the bell. */ .gn { position: fixed; right: max(20px, env(safe-area-inset-right)); bottom: max(20px, calc(env(safe-area-inset-bottom) + 12px)); z-index: 45; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; pointer-events: none; } .gn[hidden], body:not(.goapp) .gn, body.ga-drawer .gn { display: none; } .gn > * { pointer-events: auto; } body.goapp:has(.gn:not([hidden])) > main { padding-bottom: 112px; } body.goapp:has(.gn:not([hidden])) .ga-toasts { bottom: calc(max(20px, calc(env(safe-area-inset-bottom) + 12px)) + 64px); } .gn-bell { order: 2; position: relative; display: grid; place-items: center; width: 52px; height: 52px; padding: 0; border-radius: 16px; border: 1px solid var(--card-edge); background: var(--card); color: var(--ink); box-shadow: 0 12px 30px -14px rgba(0, 0, 0, .5); cursor: pointer; } .gn-bell:hover { border-color: var(--muted); } .gn-bell:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; } .gn.on .gn-bell { background: var(--ink); color: var(--paper); border-color: var(--ink); } .gn-n { position: absolute; top: -6px; right: -6px; min-width: 22px; height: 22px; padding: 0 6px; box-sizing: border-box; border-radius: 999px; display: grid; place-items: center; font: 600 12px/1 var(--sans); font-variant-numeric: tabular-nums; background: var(--green); color: var(--paper); box-shadow: 0 0 0 2px var(--paper); } .gn-n[hidden] { display: none; } .gn-bell.r .gn-n { background: var(--red); } .gn-panel { order: 1; box-sizing: border-box; width: min(400px, calc(100vw - 32px)); max-height: min(560px, calc(100vh - 120px)); max-height: min(560px, calc(100dvh - 120px)); display: flex; flex-direction: column; border-radius: 18px; background: var(--card); border: 1px solid var(--card-edge); box-shadow: 0 24px 60px -24px rgba(0, 0, 0, .6); color: var(--ink); overflow: hidden; } .gn-panel[hidden] { display: none; } @media (prefers-reduced-motion: no-preference) { .gn-panel:not([hidden]) { animation: gn-in .22s var(--ease) both; transform-origin: 100% 100%; } } @keyframes gn-in { from { opacity: 0; transform: translateY(8px) scale(.98); } } .gn-head { display: flex; align-items: center; gap: 10px; padding: 14px 10px 12px 18px; border-bottom: 1px solid var(--rule-2); } .gn-head h2 { margin: 0 auto 0 0; font: 600 16px/1.2 var(--sans); outline: none; } .gn-head .gn-all { font-size: 13.5px; } .gn-head .gn-all:disabled { color: var(--faint); cursor: default; text-decoration: none; } .gn-close { width: 36px; height: 36px; border: 0; border-radius: 10px; background: none; color: var(--muted); font: 400 22px/1 var(--sans); cursor: pointer; } .gn-close:hover, .gn-x:hover { color: var(--ink); background: var(--hover); } .gn-list { list-style: none; margin: 0; padding: 4px 0; overflow-y: auto; overscroll-behavior: contain; } .gn-i { position: relative; display: grid; grid-template-columns: 10px minmax(0, 1fr) 36px; gap: 0 10px; padding: 12px 8px 12px 14px; border-top: 1px solid var(--rule-2); } .gn-i:first-child { border-top: 0; } .gn-mark { width: 8px; height: 8px; margin-top: 7px; border-radius: 50%; background: transparent; } .gn-i.new .gn-mark { background: var(--green); } .gn-i.warn .gn-mark { background: var(--brass); } .gn-i.r { background: var(--red-soft); } .gn-i.r .gn-mark { background: var(--red); } .gn-t { margin: 0; font: 400 14.5px/1.45 var(--sans); color: var(--ink-2); overflow-wrap: anywhere; } .gn-t b { color: var(--ink); font-weight: 600; } .gn-i.r .gn-t, .gn-i.r .gn-t b { color: var(--red); } .gn-i.info .gn-t { color: var(--muted); } .gn-w { display: block; margin-top: 2px; font: 400 12.5px/1.3 var(--sans); color: var(--faint); } .gn-i.warn .gn-w { color: var(--brass-ink); } .gn-a { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; } .gn-s { margin: 6px 0 0; font-size: 13px; } .gn-s:empty { display: none; } .gn-x { align-self: start; width: 36px; height: 36px; border: 0; border-radius: 10px; background: none; color: var(--faint); font: 400 20px/1 var(--sans); cursor: pointer; } .gn-x:focus-visible, .gn-close:focus-visible { outline: 2px solid var(--green); outline-offset: -2px; } /* the panel sits outside the account page (.acct): its buttons and link as the page draws them */ .gn .btn { border-radius: 999px; border-color: var(--ink); } .gn .btn.sm { padding: 9px 15px; font: 500 13.5px/1 var(--sans); } .gn .btn.primary { background: var(--green); border-color: var(--green); color: #fbf8f1; } .gn .btn.primary:hover { background: var(--green-2); border-color: var(--green-2); } .gn .btn.primary:disabled { background: var(--paper-3); border-color: var(--paper-3); color: var(--muted); } :root[data-theme="dark"] .gn .btn.primary:not(:disabled) { color: var(--paper); } .gn .gn-i.r .btn.primary:not(:disabled) { background: var(--red); border-color: var(--red); } :root[data-theme="dark"] .gn .gn-i.r .btn.primary:not(:disabled) { color: var(--paper); } .gn .ac-link { padding: 6px 4px; background: none; border: 0; font: 500 13.5px/1 var(--sans); color: var(--muted); cursor: pointer; text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 4px; } .gn .ac-link:not(:disabled):hover { color: var(--ink); text-decoration-color: currentColor; } .gn-empty { padding: 28px 18px; text-align: center; font: 400 14px/1.4 var(--sans); color: var(--muted); } @media (max-width: 760px) { .gn { right: max(16px, env(safe-area-inset-right)); bottom: max(16px, calc(env(safe-area-inset-bottom) + 10px)); } .gn-bell { width: 48px; height: 48px; border-radius: 14px; } .gn-panel { max-height: calc(100dvh - 140px); } body.goapp:has(.gn:not([hidden])) > main { padding-bottom: 96px; } } .sx { margin: 0 0 18px; max-width: 60em; } .sx-row { display: grid; grid-template-columns: 1.1fr 1fr 1.3fr; gap: 6px 16px; margin: 0; padding: 10px 0; border-top: 1px solid var(--rule-2); font-size: 14.5px; line-height: 1.45; color: var(--ink-2); } .sx-head { border-top: 0; font: 600 12.5px/1.2 var(--sans); color: var(--muted); } .sx-row dt { color: var(--ink); font-weight: 500; } .sx-row dd { margin: 0; } .sx-k { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .acct .pt-faq .sx-levels { margin: -8px 0 18px; padding-left: 20px; max-width: 46em; color: var(--ink-2); font-size: 15.5px; line-height: 1.6; } @media (max-width: 760px) { .sx-head { display: none; } .sx-row { grid-template-columns: minmax(0, 1fr); } .sx-k { position: static; width: auto; height: auto; clip: auto; font-weight: 600; color: var(--muted); margin-right: 6px; } } /* on a phone: the Scores totals in one column, its facts in two (.acct .sk-figs holds three: fr's "Remboursements" would not fit) */ @media (max-width: 640px) { .acct .sk-figs.sc-tot { grid-template-columns: minmax(0, 1fr); } .acct .sk-figs.ag-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* a Help entry a link opens (#ac-faq-score): its question lands under the app's top bar, not behind it */ #ac-faq > details { scroll-margin-top: calc(var(--ga-top, 64px) + 16px); } /* the stock table stays inside its panel: it scrolls sideways within it on a narrow screen, never past the edge */ #ac-stocks .tablewrap { overflow-x: auto; margin: 0 -4px; padding: 0 4px; } #ac-stocks .ga-table { width: 100%; min-width: 620px; } #ac-stocks .ga-table .sk-act { width: 1%; white-space: nowrap; } #ac-stocks .ga-table .btn.sm { padding: 7px 12px; } #ac-stocks .ga-table td.num { white-space: nowrap; } #ac-stocks .sk-tok .sub { display: block; } .acct .le-figs { grid-template-columns: repeat(4, minmax(0, 1fr)); } .acct .le-earn { background: var(--glow) !important; } .acct .le-earn b { color: var(--green); } .acct .le-earn .label { color: var(--ink-2); } .acct .le-earn i { display: block; margin-top: 4px; font: 400 12px/1.35 var(--sans); font-style: normal; color: var(--ink-2); } @media (max-width: 900px) { .acct .le-figs { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* the Stocks tab's tokens: rows that always fit their panel (on a phone: the token, then price, holding and buttons). The buttons' column has one width in the header and in every row (each is its own grid), so the columns line up. */ .st-head, .st-row { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(110px, .8fr) minmax(110px, .8fr) 10.5rem; align-items: center; gap: 12px; } .st-head { padding: 0 12px 6px; font: 600 11.5px/1 var(--sans); letter-spacing: .05em; text-transform: uppercase; color: var(--muted); } .st-head span:nth-child(2), .st-head span:nth-child(3) { text-align: right; } .st-list { display: grid; gap: 6px; } .st-row { padding: 10px 12px; border-radius: 14px; background: var(--card-2); } .st-row[hidden] { display: none; } .st-tok { display: flex; align-items: center; gap: 10px; min-width: 0; } .st-tok .nm { display: grid; min-width: 0; } .st-tok .nm b { font: 600 15px/1.2 var(--sans); } .st-tok .nm .sub { font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .st-price, .st-held { display: grid; text-align: right; } .st-price b, .st-held b { font: 600 15px/1.2 var(--sans); font-variant-numeric: tabular-nums; } .st-price .sub, .st-held .sub { font-size: 12px; } .st-price .sub.r { color: var(--red); } .st-acts { display: inline-flex; justify-content: flex-end; gap: 6px; } .st-acts .btn.sm { padding: 7px 12px; } @media (max-width: 640px) { .st-head { display: none; } .st-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "tok tok" "price held" "acts acts"; row-gap: 8px; } .st-tok { grid-area: tok; } .st-price { grid-area: price; text-align: left; } .st-held { grid-area: held; } .st-acts { grid-area: acts; } .st-acts .btn.sm { flex: 1; text-align: center; } } /* ---- Go app layout: nothing overlaps, clips or runs off at any width (a layout audit, 360 to 1920 px) ---- */ /* the top bar: the title gives way last but can, the house's figures give way first and only whole (a figure that does not fit wraps onto a second line the bar hides), and the right-hand cluster never moves */ .ga-title { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; line-height: 1.25; } .ga-title:focus { outline: none; } /* focused by script on a tab change (account-page.js), for screen readers */ .ga-stats { flex: 0 100 auto; flex-wrap: wrap; align-content: flex-start; height: 44px; } .ga-stat { box-sizing: border-box; height: 44px; display: flex; flex-direction: column; justify-content: center; } .ga-stat[hidden] { display: none; } .ga-right { flex: none; } .ga-me-btn { max-width: 220px; min-width: 40px; min-height: 40px; } .ga-me-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ga-me-menu { max-width: calc(100vw - 24px); } .ga-me-head b { overflow-wrap: anywhere; } /* a figure's label and value sit at the top of their cell, however tall a neighbour in the row is */ .acct .sk-figs > div { align-content: start; } /* All agents: a long name wraps (two lines at most) so the agent's number beside it always shows */ .ex-nm { white-space: normal; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; } .ex-nm .sub { white-space: nowrap; } @media (max-width: 560px) { .ex-row { grid-template-columns: 22px minmax(0, 1fr) 92px; gap: 10px; padding: 10px 12px; } .ex-nm { -webkit-line-clamp: 3; line-clamp: 3; } } /* the Stocks tab: a token's long name wraps to a second line rather than hiding its LTV */ .st-tok .nm .sub { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; } /* phones: notes in the corner stay compact (the newest two), and every control is at least 32 px tall to tap */ @media (max-width: 560px) { .ga-toasts { right: 10px; bottom: 10px; gap: 6px; width: calc(100vw - 20px); } .ga-toast { padding: 9px 12px 11px; gap: 10px; } .ga-toast:nth-child(n+3) { display: none; } .ga-toast-logo img { width: 28px; height: 28px; } } @media (max-width: 860px) { .acct .ac-link { display: inline-flex; align-items: center; min-height: 32px; } .acct .ac-me .ac-addr { align-items: center; row-gap: 0; } .acct .ac-name { align-items: center; row-gap: 0; } .addr-tog::after { content: ""; position: absolute; inset: -8px -4px; } /* a bigger tap area, the same small pill */ .ag-switch button { padding: 11px 16px; } .ag-chip { padding: 9px 12px; } .st-acts .btn.sm { padding: 9px 12px; } .st-own summary { padding: 8px 0; } } /* ---- Home, the control tower: the featured stocks, savings on Morpho, the pool, the latest of History ---- */ .hm-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 12px; margin: 18px 0 8px; } .hm-grid[hidden] { display: none; } .hm-card { min-width: 0; padding: 16px 18px; border-radius: 16px; background: var(--card-2); border: 1px solid var(--card-edge); display: flex; flex-direction: column; gap: 10px; } .hm-card > header { display: flex; align-items: baseline; gap: 8px; } .hm-card > header h3 { margin: 0; font: 600 15px/1.2 var(--sans); color: var(--ink); } .hm-card > header .sub { font: 500 11px/1 var(--sans); color: var(--muted); letter-spacing: .04em; text-transform: uppercase; } .hm-card > header .k { margin-left: auto; font-size: 13px; } .hm-stocks { grid-row: span 2; } .hm-list { display: flex; flex-direction: column; } .hm-row { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto 76px; align-items: center; gap: 12px; padding: 9px 6px; margin: 0 -6px; border-radius: 10px; color: var(--ink); text-decoration: none; transition: background .15s steps(2); } .hm-row + .hm-row { border-top: 1px solid var(--rule-2); } .hm-row:hover { background: var(--card); } .hm-row .sk-logo { width: 30px; height: 30px; } .hm-nm { display: flex; flex-direction: column; min-width: 0; } .hm-nm b { font: 600 14px/1.2 var(--sans); } .hm-nm .sub { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hm-px { font: 500 15px/1 var(--sans); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; } .hm-ch { justify-self: end; font: 600 12.5px/1 var(--sans); font-variant-numeric: tabular-nums; padding: 5px 7px; border-radius: 7px; background: var(--card); color: var(--muted); white-space: nowrap; } .hm-ch.up { color: var(--green); background: color-mix(in srgb, var(--green) 14%, transparent); } .hm-ch.down { color: var(--red); background: color-mix(in srgb, var(--red) 14%, transparent); } .hm-ch.na { background: none; } .hm-row:focus-visible { outline: 2px solid var(--green); outline-offset: 1px; } .hm-big { display: flex; align-items: baseline; gap: 10px; } .hm-big b { font: 400 40px/1 var(--serif); color: var(--green); font-variant-numeric: lining-nums tabular-nums; } .hm-big b.na { font-size: 22px; color: var(--muted); } .hm-big span { font: 500 13px/1 var(--sans); color: var(--muted); } .hm-save .sub { margin: 0; font-size: 12.5px; color: var(--muted); } .hm-save .btn { align-self: flex-start; } .hm-dl { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px 14px; margin: 0; } .hm-dl dt { font: 500 11.5px/1.2 var(--sans); color: var(--muted); } .hm-dl dd { margin: 3px 0 0; font: 600 15px/1.15 var(--sans); color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; } .hm-pool .hm-dl { grid-template-columns: repeat(3, minmax(0, 1fr)); } .hm-recent { grid-column: 1 / -1; } .hm-feed { list-style: none; margin: 0; padding: 0; } .hm-ev { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 8px 0; } .hm-ev + .hm-ev { border-top: 1px solid var(--rule-2); } .hm-ev-ico { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; background: var(--card); color: var(--ink-2); } .hm-ev.repaid .hm-ev-ico, .hm-ev.back .hm-ev-ico { color: var(--green); } .hm-ev.defaulted .hm-ev-ico { color: var(--red); } .hm-ev-what { font: 500 14px/1.3 var(--sans); min-width: 0; } .hm-ev-amt { font: 500 14px/1 var(--sans); font-variant-numeric: tabular-nums; white-space: nowrap; } .hm-ev-amt.in { color: var(--green); } .hm-ev-when, .hm-ev-when a { font-size: 12px; color: var(--muted); white-space: nowrap; } @media (max-width: 900px) { .hm-grid { grid-template-columns: minmax(0, 1fr); } .hm-stocks { grid-row: auto; } } @media (max-width: 560px) { .hm-row { grid-template-columns: 28px minmax(0, 1fr) auto 64px; gap: 10px; } .hm-pool .hm-dl { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hm-ev { grid-template-columns: 28px minmax(0, 1fr) auto; } .hm-ev-when { grid-column: 2 / -1; } } /* [pt] account-pt.js's cards: Home's short card across the grid, and its section on the Backing tab. Each [pt] block, up to its closing marker, is left out of a build without SITE_PT=on (scripts/build-site.mjs), as account-pt.js is. */ .hm-pt { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto; align-items: center; gap: 10px 22px; } .hm-pt > header { grid-column: 1 / -1; } .hm-pt > .sub { margin: 0; font-size: 13px; line-height: 1.45; color: var(--muted); } .hm-pt .hm-dl { grid-template-columns: repeat(3, minmax(0, 1fr)); } .hm-pt > .btn { justify-self: end; } @media (max-width: 900px) { .hm-pt { grid-template-columns: minmax(0, 1fr); } .hm-pt > .btn { justify-self: start; } } @media (max-width: 560px) { .hm-pt .hm-dl { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hm-pt .hm-dl dd { white-space: normal; } } /* [/pt] */ /* a protocol's own mark beside the feature that uses it (web/brand-logos/: Morpho on Savings), as identification only: the official file on a round tile, as a stock logo sits (.sk-logo; the colour mark on the dark tile, .dk), at --s */ .sk-logo.pl-logo { width: var(--s, 34px); height: var(--s, 34px); align-self: center; } .sk-logo.pl-logo img { padding: calc(var(--s, 34px) * .14); } .sk-logo.dk.pl-logo img { padding: 0; } /* the mark's file has its own margin round the mark */ .sk-logo.pl-logo::before { content: none; } .panel > header .pl-logo { align-self: center; margin-right: -4px; } .hm-card > header .pl-logo { align-self: center; margin: -4px -2px -4px 0; } /* the Backing tab's sections (account.html #ac-stocks): Your lines, then any other token's section, then Stock tokens */ .acct .bk-sec { margin-top: 30px; padding-top: 20px; border-top: 1px solid var(--rule-2); } .acct .bk-h { margin: 0 0 4px; font: 400 24px/1.15 var(--serif); color: var(--ink); } .acct .bk-lead { margin: 0 0 10px; font: 400 14px/1.45 var(--sans); color: var(--muted); } /* [pt] account-pt.js's section on the Backing tab */ .ptu-card { display: grid; gap: 10px; margin: 10px 0 6px; padding: 16px 18px; border-radius: 16px; background: var(--card-2); border: 1px solid var(--card-edge); } .ptu-card > header { display: flex; align-items: center; gap: 12px; } .ptu-card > header h3 { margin: 0; font: 600 16px/1.2 var(--sans); color: var(--ink); } .ptu-card > header .sub { font: 500 14px/1.3 var(--sans); color: var(--ink-2); } .ptu-card > p { margin: 0; max-width: 62em; font: 400 14px/1.5 var(--sans); color: var(--muted); } .ptu-card .ptu-dl { grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 4px 0 2px; } .ptu-card .ptu-bar { height: 5px; margin-top: 7px; max-width: 160px; } .ptu-card > .row { margin: 0; gap: 8px; } .ptu-tag { display: inline-block; margin-left: 8px; padding: 3px 9px; border-radius: 999px; vertical-align: middle; font: 600 11px/1.3 var(--sans); letter-spacing: .03em; color: var(--brass-ink, var(--ink-2)); background: color-mix(in srgb, var(--brass, #b08a3e) 16%, transparent); border: 1px solid color-mix(in srgb, var(--brass, #b08a3e) 40%, transparent); } .hm-card > header .ptu-tag { margin-left: 2px; } .ptu-tag, .hm-pt > header h3 { white-space: nowrap; } .hm-pt > header { flex-wrap: wrap; row-gap: 6px; } .ptu-card > .ptu-why { margin: 0; font-size: 13px; color: var(--muted); } .ptu-card > .row { align-items: center; flex-wrap: wrap; } .ptu-card .ptu-dl.ptu-dl2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 420px; } .ptu-mk { margin-left: 6px; font: 500 13px/1.3 var(--sans); color: var(--muted); text-decoration: underline; text-decoration-color: var(--rule-2); text-underline-offset: 3px; } .ptu-mk:hover { color: var(--ink); } /* the trade panel (account-pt.js trade): buy or sell, an amount, the quote, one button */ .ptu-trade:empty { display: none; } .ptu-tr { display: grid; gap: 10px; max-width: 520px; padding: 14px 16px; border-radius: 14px; background: var(--card); border: 1px solid var(--card-edge); } .ptu-trh { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; } .ptu-trt { font: 600 15px/1.2 var(--sans); color: var(--ink); } .ptu-seg { display: inline-grid; grid-auto-flow: column; gap: 2px; padding: 3px; border-radius: 999px; background: var(--card-2); border: 1px solid var(--card-edge); } .ptu-seg[hidden] { display: none; } .ptu-seg button { min-width: 64px; padding: 7px 14px; border: 0; border-radius: 999px; background: transparent; font: 600 13px/1 var(--sans); color: var(--muted); cursor: pointer; } .ptu-seg button[aria-selected="true"] { background: var(--ink); color: var(--card); } .ptu-seg button:focus-visible { outline: 2px solid var(--green); outline-offset: 1px; } .ptu-amt { display: flex; align-items: center; gap: 8px; min-width: 0; } .acct .ptu-amt .ptu-in { flex: 1 1 auto; min-width: 0; width: 100%; font-variant-numeric: tabular-nums; } .ptu-u { font: 600 13px/1 var(--sans); color: var(--ink-2); white-space: nowrap; } .ptu-tr > .ptu-bal { margin: -2px 0 0; font-size: 13px; color: var(--muted); } .ptu-tr > .wstat { padding: 0; } .ptu-tr > .wstat:empty { display: none; } .ptu-tr > .row { margin: 2px 0 0; } .ptu-tr .ptu-go { min-width: 160px; } @media (max-width: 560px) { .ptu-tr { padding: 12px; } .ptu-tr .ptu-go { width: 100%; } } /* [/pt] */ /* the account's own address copies itself when clicked (addr.js .addr-copy): a pointer, a dotted underline on hover, and "Copied" over it for a moment */ .addr-copy[data-addr] { position: relative; cursor: copy; border-radius: 4px; text-decoration: underline dotted transparent; text-underline-offset: 3px; transition: text-decoration-color .15s steps(2), color .15s steps(2); } .addr-copy[data-addr]:hover, .addr-copy[data-addr]:focus-visible { color: var(--ink); text-decoration-color: currentColor; outline: none; } .addr-copy.copied::after { content: "Copied"; position: absolute; left: 50%; top: calc(100% + 6px); z-index: 5; transform: translateX(-50%); padding: 4px 8px; border-radius: 6px; background: var(--ink); color: var(--paper, #fff); font: 600 11px/1 var(--sans); white-space: nowrap; pointer-events: none; animation: addr-copied .18s steps(3) both; } @keyframes addr-copied { from { opacity: 0; transform: translate(-50%, -3px); } to { opacity: 1; transform: translate(-50%, 0); } } /* Savings: the figures share the row evenly, whichever show (no empty column when Available to withdraw is hidden), and Morpho's net APY sits beside the balances in a soft green card, labelled as Morpho's and variable */ .acct .as-figs { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } .acct .as-figs > .as-apy { background: color-mix(in srgb, var(--green) 9%, var(--card-2)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--green) 24%, transparent); } .as-apy .label { display: inline-flex; align-items: center; gap: 7px; } .as-apy .label::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--green); } .as-apy b { color: var(--green); } .as-apy b.na { font-size: 15px; color: var(--muted); } .as-apy .sub { font-size: 11.5px; color: var(--muted); } @media (max-width: 760px) { .acct .as-figs { grid-template-columns: repeat(2, minmax(0, 1fr)); } .acct #as-ready-box[hidden] ~ .as-apy { grid-column: 1 / -1; } } /* a part of a tab opened from the account menu (#ac-2fa): a short glow where the eye should land */ .ac-flash { animation: ac-flash 1.6s var(--ease, ease) both; border-radius: 14px; } @keyframes ac-flash { 0% { box-shadow: 0 0 0 0 var(--glow); } 20% { box-shadow: 0 0 0 6px var(--glow); } 100% { box-shadow: 0 0 0 0 transparent; } } @media (prefers-reduced-motion: reduce) { .ac-flash { animation: none; box-shadow: 0 0 0 1px var(--green), 0 0 0 4px var(--glow); } } /* still: a ring, no glow that fades */ /* a Help entry's question brought in (#ac-faq-score): a tint spread past its text, which has no side padding, instead of a ring; the focus ring, when it shows, sits inside the tint */ .pt-faq summary.ac-flash { animation: ac-flash-q 1.6s var(--ease, ease) both; border-radius: 10px; } @keyframes ac-flash-q { 0%, 30% { background: var(--glow); box-shadow: 0 0 0 10px var(--glow); } 100% { background: transparent; box-shadow: 0 0 0 10px transparent; } } @media (prefers-reduced-motion: reduce) { .pt-faq summary.ac-flash { animation: none; background: var(--glow); box-shadow: 0 0 0 10px var(--glow); } } /* All agents: the right-hand column, short (what is out, with a dot) */ .ex-on { display: inline-flex; align-items: center; gap: 6px; font: 500 12.5px var(--sans); } .ex-on i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; } /* Activity: one line a row (dot, what, amount, when), a short name */ .ex-ev { grid-template-columns: 10px minmax(0, 1fr) auto auto; grid-template-areas: "dot what amt when"; align-items: center; gap: 0 10px; padding: 9px 0; } .ex-ev .ex-dot { margin-top: 0; } .ex-what { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ex-when { white-space: nowrap; font-size: 11.5px; } /* New agent, signed in: the create form and the USDG step wait for the account's agents to be read (start.js) */ body.st-checking #st-go-row, body.st-checking #st-3 .st-own, body.st-checking #st-steps, body.st-checking #st-have, body.st-checking #st-2 { display: none !important; } body.st-checking #st-3-s:empty::before { content: attr(data-wait); color: var(--muted); } /* ---- The agent panel (web/account-agent.js): an agent's record over the tab, and what the account can do with it. A drawer on the right on a computer, the whole screen on a phone. Above the sidebar (40) and a phone's dimmed page (35), below the notes in the corner (60) and the two-step code window (1000). Closed, it is hidden: nothing off screen. ---- */ .ap { position: fixed; inset: 0; z-index: 50; } .ap-back { position: absolute; inset: 0; background: color-mix(in srgb, var(--night) 55%, transparent); animation: ap-fade .2s var(--ease) both; } .ap-card { position: absolute; top: 0; right: 0; bottom: 0; width: min(480px, 100%); overflow-y: auto; overscroll-behavior: contain; background: var(--card); border-left: 1px solid var(--card-edge); box-shadow: -28px 0 70px -36px color-mix(in srgb, var(--night) 70%, transparent); color: var(--ink); animation: ap-in .26s var(--ease) both; } .ap-card:focus, .ap-t:focus { outline: none; } .ap-top { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: 12px; min-height: var(--ga-top, 64px); padding: 0 14px 0 24px; background: color-mix(in srgb, var(--card) 92%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--card-edge); } .ap-tt { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 600 15px/1.2 var(--sans); color: var(--ink); opacity: 0; transition: opacity .15s var(--ease); } .ap-tt .ac-id { font: 500 12.5px var(--mono); color: var(--muted); } .ap-top.titled .ap-tt { opacity: 1; } .ap-kind { margin: 0 0 6px; font: 600 11.5px/1.2 var(--sans); letter-spacing: .07em; text-transform: uppercase; color: var(--muted); } .ap-kind:empty { display: none; } .ap-wait { color: var(--muted); } /* a name not read yet: "Agent", "Agent #490", faint until the record names it */ .ap-x { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--card-edge); border-radius: 999px; background: var(--card-2); color: var(--ink-2); font: 400 22px/1 var(--sans); cursor: pointer; } .ap-x:hover { color: var(--ink); border-color: var(--muted); } .ap-body { padding: 20px 24px 28px; } .ap-t { margin: 0; font: 500 34px/1.08 var(--serif); letter-spacing: -.3px; overflow-wrap: anywhere; } .ap-t .ac-id { font: 500 15px var(--mono); letter-spacing: 0; color: var(--muted); } .ap-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 12px; font: 400 13.5px/1.4 var(--sans); color: var(--muted); } .ap-sub .ac-pill { margin: 0; } .ap-you { padding: 5px 11px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--green) 55%, transparent); color: var(--green); font: 600 12.5px/1 var(--sans); } .ap-own { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; } .ap-own .label { font-size: 12.5px; } .ap-uri { overflow-wrap: anywhere; } .ap-sub > .ap-uri { flex-basis: 100%; } /* the card URI: always on a line of its own */ .ap-sub .btn { margin-left: 2px; } /* what the account can do: one row each, its name and a line on it; one leads; one that can't be done says why */ .ap-acts { display: grid; gap: 8px; margin: 22px 0 4px; } .ap-act { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 3px 14px; width: 100%; padding: 13px 16px; border: 1px solid var(--card-edge); border-radius: 16px; background: var(--card-2); color: var(--ink); text-align: left; font: inherit; cursor: pointer; transition: border-color .15s steps(2), box-shadow .15s steps(2); } .ap-act b { font: 600 15.5px/1.2 var(--sans); } .ap-act .sub { grid-column: 1; font: 400 13px/1.4 var(--sans); color: var(--muted); } .ap-act .sub .r { color: var(--red); } .ap-act i { grid-column: 2; grid-row: 1 / span 2; font: 600 17px/1 var(--sans); font-style: normal; color: var(--green); } .ap-act:hover:not([aria-disabled="true"]), .ap-act:focus-visible { border-color: var(--green); box-shadow: 0 0 0 3px var(--glow); } .ap-act.lead { border-color: color-mix(in srgb, var(--green) 50%, var(--card-edge)); background: color-mix(in srgb, var(--green) 8%, var(--card-2)); } .ap-act[aria-disabled="true"] { cursor: default; background: transparent; border-style: dashed; } .ap-act[aria-disabled="true"] b { color: var(--muted); font-weight: 500; } .ap-act[aria-disabled="true"] .sub { color: var(--ink-2); } .ap-act[aria-disabled="true"] i { visibility: hidden; } .ap-fail { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0; font: 400 13.5px/1.4 var(--sans); } .ap-fail .r, .ap-sub .r { color: var(--red); } /* its figures: two to a row, public ones never blurred (only the account's own agent's, with Hide balances) */ .ap-figs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin: 18px 0 0; border: 1px solid var(--card-edge); border-radius: 16px; overflow: hidden; background: var(--card-edge); } .ap-figs > div { min-width: 0; padding: 12px 14px 13px; background: var(--card-2); } .ap-figs > div:last-child:nth-child(odd) { grid-column: 1 / -1; } .ap-figs dt { font: 500 12px/1.2 var(--sans); color: var(--muted); } .ap-figs dd { margin: 5px 0 0; font: 400 24px/1.1 var(--serif); font-variant-numeric: lining-nums tabular-nums; color: var(--ink); overflow-wrap: anywhere; } .ap-figs dd .sub { margin-left: 5px; font: 500 12px var(--sans); color: var(--muted); } .ap-figs dd.ap-name { font: 500 16px/1.35 var(--sans); } .ap-body .sc-bars { margin-top: 10px; } .ap-body .sc-bar { grid-template-columns: minmax(0, 120px) minmax(0, 1fr) auto; } .ap-feed { margin-top: 4px; } .ap-feed .ap-self { font-weight: 400; color: var(--muted); } .ap-feed .ex-what .ap-v1 { margin-left: 6px; font: 500 11.5px var(--sans); } .ap-foot { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--card-edge); } .ap-foot:empty { display: none; } /* Copy badge in the foot (account-agent.js): its confirmation beside it, and the Markdown below, shown only when the browser refused the clipboard */ .ap-badge-s { align-self: center; font-size: 13px; color: var(--muted); } .ap-badge-s:empty { display: none; } .ap-badge-md { flex: 1 1 100%; min-width: 0; padding: 8px 10px; font: 12px/1.5 var(--mono); color: var(--ink-2); background: var(--paper-2); border: 1px solid var(--rule); } /* an agent's name anywhere in the app: a link to its panel */ .ap-link { color: inherit; text-decoration: underline dotted; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); text-underline-offset: 3px; cursor: pointer; } .ap-link:hover, .ap-link:focus-visible { color: var(--green); text-decoration-color: currentColor; } .ga-row .ap-link .sub { display: inline; } /* a row's agent: its name and number on one line */ #ag-cards > article[data-agent] { scroll-margin-top: calc(var(--ga-top, 64px) + 16px); } @keyframes ap-in { from { transform: translateX(32px); opacity: 0; } } @keyframes ap-up { from { transform: translateY(28px); opacity: 0; } } @keyframes ap-fade { from { opacity: 0; } } @media (max-width: 860px) { .ap-card { width: 100%; border-left: 0; box-shadow: none; animation-name: ap-up; } .ap-top { min-height: 56px; padding: 0 10px 0 16px; } .ap-body { padding: 16px 16px 32px; } .ap-t { font-size: 30px; } .ap-link { position: relative; } .ap-link::after { content: ""; position: absolute; inset: -8px -2px; } /* a bigger tap area, the same text */ .ap-feed a.ex-when { display: inline-block; padding: 9px 0; margin: -9px 0; } /* a transaction's time: a 33px tap */ } @media (max-width: 640px) { .ap-body .sc-bar { grid-template-columns: minmax(0, 104px) minmax(0, 1fr) auto; } } @media (prefers-reduced-motion: reduce) { .ap-back, .ap-card { animation: none; } .ap-act, .ap-tt { transition: none; } } /* ---- Buy $PRIORS (web/account-buy.js): the account's USDG swapped for $PRIORS, in the agent panel's frame (.ap). Opened from Home's $PRIORS figure (#ac-priors-get) and the Seats tab (#se-buy-usdg). ---- */ html.pb-lock, html.pb-lock body { overflow: hidden; } .ac-fig-btn { background: none; border: 0; padding: 0; font: inherit; font-size: 12.5px; cursor: pointer; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; } .ac-fig-btn:hover { color: var(--ink); } .pb .pb-lead { margin: 10px 0 0; font: 400 15px/1.5 var(--sans); color: var(--ink-2); } .pb .pb-figs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 20px 0 6px; } .pb .pb-figs > div { display: grid; gap: 4px; padding: 12px 14px; border: 1px solid var(--card-edge); border-radius: 14px; background: var(--card-2); min-width: 0; } .pb .pb-figs b { font: 600 17px/1.2 var(--sans); overflow-wrap: anywhere; } .pb .pb-form { display: grid; gap: 8px; margin-top: 16px; } .pb .pb-form .row { display: flex; gap: 8px; flex-wrap: nowrap; } .pb .pb-form input { flex: 1 1 auto; min-width: 0; } .pb .pb-quote { min-height: 24px; } .pb .pb-q { margin: 6px 0 0; font: 500 15px/1.45 var(--sans); color: var(--ink); } .pb .pb-why { margin: 6px 0 0; font: 400 14px/1.45 var(--sans); color: var(--red); } .pb .pb-notes { margin: 6px 0 4px; padding-left: 18px; display: grid; gap: 4px; font: 400 13.5px/1.45 var(--sans); color: var(--muted); } .pb .pb-acts { flex-wrap: wrap; margin-top: 8px; } /* /borrow: the landing's hero, account strip and chapters (.hero, .account, .chapter), a mosaic of the accepted tokens in place of the bonsai (web/borrow.js fills it), and the narrower blocks that sit in the chapter's text column */ .bw-hero h1 { font-size: clamp(44px, 5.6vw, 76px); } .bw-signin { margin-top: 14px; font-size: 14px; color: var(--muted); } .bw-art { margin: 0; align-self: end; min-width: 0; } .bw-tiles { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-top: 1px solid var(--ink); border-left: 1px solid var(--rule-2); } .bw-tile { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; min-height: 96px; padding: 14px 4px 12px; border-right: 1px solid var(--rule-2); border-bottom: 1px solid var(--rule-2); } .bw-tile.empty { background: var(--paper-2); } .bw-tile .sk-logo { width: 34px; height: 34px; margin-bottom: 4px; } .bw-tile b { font: 500 13px/1.2 var(--sans); color: var(--ink); max-width: 100%; overflow: hidden; text-overflow: ellipsis; } .bw-tile > span:last-child { font: 400 12px/1.2 var(--mono); color: var(--muted); font-variant-numeric: tabular-nums; } .bw-tile.hold { opacity: .5; } .bw-art figcaption { display: flex; flex-wrap: wrap; column-gap: 14px; row-gap: 2px; align-items: baseline; padding-top: 12px; font: italic 400 16px/1.4 var(--serif); color: var(--muted); } .bw-art figcaption b { font: normal 500 14px/1.4 var(--sans); color: var(--green); white-space: nowrap; } .bw .chapter.bw-tight { padding-top: 0; } .bw .account .v { font-size: clamp(34px, 3.6vw, 50px); } .bw-col { margin-left: 344px; min-width: 0; } .bw-meta { margin-top: 14px; font-size: 14px; line-height: 1.5; color: var(--muted); max-width: 65ch; } .bw-meta a { text-decoration: underline; text-underline-offset: 3px; } .bw-risks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--ink); } .bw-risk { padding: 26px 32px 28px 0; border-bottom: 1px solid var(--rule); } .bw-risk:nth-child(even) { padding: 26px 0 28px 32px; border-left: 1px solid var(--rule); } .bw-risk h3 { font: 500 23px/1.2 var(--serif); margin: 0 0 8px; } .bw-risk p { color: var(--ink-2); max-width: 38em; } .bw-risk a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; } .bw-end { margin-top: 36px; gap: 18px 22px; } .bw-end .bw-signin { margin: 0; } #bw-table td:first-child { white-space: nowrap; } #bw-table .bw-logo { display: inline-grid; width: 26px; height: 26px; vertical-align: middle; margin-right: 10px; } #bw-table .bw-logo::before { font-size: 10px; } #bw-table .bw-logo img { padding: 3px; } @media (max-width: 1000px) { .bw-col { margin-left: 0; } .bw .chapter.bw-tight { padding-top: 0; } } @media (max-width: 900px) { .bw-tiles { grid-template-columns: repeat(6, minmax(0, 1fr)); } } @media (max-width: 620px) { .bw-tile { min-height: 78px; padding: 10px 2px 9px; gap: 2px; } .bw-tile .sk-logo { width: 28px; height: 28px; } .bw-tile b { font-size: 11.5px; } .bw-tile > span:last-child { font-size: 10.5px; } .bw-risks { grid-template-columns: minmax(0, 1fr); } .bw-risk, .bw-risk:nth-child(even) { padding: 22px 0; border-left: 0; } .bw-cost table { min-width: 0; } .bw-cost th, .bw-cost td { white-space: normal; } } /* ------------------------------------------------------------------ Go mode Seats tab (account-seats.js) */ .acct .se-hero { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 2fr); gap: 10px; margin: 6px 0 12px; } .acct .se-big { display: grid; align-content: center; gap: 6px; padding: 20px 22px; border-radius: 18px; background: color-mix(in srgb, var(--green) 10%, var(--card-2)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--green) 26%, transparent); } .acct .se-big b { font: 500 38px/1.05 var(--serif); font-variant-numeric: lining-nums tabular-nums; color: var(--green); overflow-wrap: anywhere; } .acct .se-big .sub { font-size: 13px; } .acct .se-figs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .acct .se-figs > div { display: grid; align-content: start; gap: 6px; padding: 14px 16px; border-radius: 16px; background: var(--card-2); } .acct .se-figs b { font: 500 22px/1.15 var(--serif); font-variant-numeric: lining-nums tabular-nums; overflow-wrap: anywhere; } .acct .se-figs .sub { font-size: 12.5px; line-height: 1.4; } .acct .se-you { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: 10px 18px; align-items: center; margin: 4px 0 8px; padding: 14px 16px; border-radius: 16px; border: 1px solid var(--card-edge); background: var(--card); } .acct .se-you > div:not(.se-you-act) { display: grid; gap: 4px; } .acct .se-you b { font: 600 16px/1.2 var(--sans); } .acct .se-you-act { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; } .acct .se-need { margin: 0 0 8px; padding: 10px 14px; border-radius: 12px; background: var(--brass-soft); color: var(--ink-2); font: 400 13.5px/1.45 var(--sans); } .acct .se-chips { margin: 0 0 10px; } .acct .se-chips .ag-chip i { font-style: normal; opacity: .7; margin-left: 2px; } .acct .se-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 10px; margin: 6px 0 10px; } .acct .se-cards > .ga-empty { grid-column: 1 / -1; } .acct .se-card { display: grid; gap: 12px; align-content: start; padding: 16px; border-radius: 16px; background: var(--card); border: 1px solid var(--card-edge); transition: border-color .15s, box-shadow .15s; } .acct .se-card.on { border-color: var(--green); box-shadow: 0 0 0 3px var(--glow); } .acct .se-c-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; } .acct .se-c-name { font: 600 16px/1.25 var(--sans); min-width: 0; overflow-wrap: anywhere; } .acct .se-c-name .sub { display: inline; font-weight: 400; } .acct .se-st { font: 600 11.5px/1 var(--sans); letter-spacing: .02em; padding: 5px 9px; border-radius: 999px; white-space: nowrap; background: var(--paper-2); color: var(--muted); } .acct .se-st-open { background: var(--glow); color: var(--green); } .acct .se-st-yours { background: var(--brass-soft); color: var(--brass); } .acct .se-st-warn { background: var(--red-soft); color: var(--red); } .acct .se-c-fee { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 10px; padding: 10px 12px; border-radius: 12px; background: var(--card-2); } .acct .se-c-fee b { font: 500 21px/1.1 var(--serif); font-variant-numeric: lining-nums tabular-nums; color: var(--green); } .acct .se-c-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 12px; margin: 0; } .acct .se-c-stats > div { min-width: 0; } .acct .se-c-stats dt { font-size: 12px; color: var(--muted); } .acct .se-c-stats dd { margin: 2px 0 0; font: 600 14.5px/1.25 var(--sans); overflow-wrap: anywhere; } .acct .se-c-stats .warn dd { color: var(--brass); } .acct .se-c-acts { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; } .acct .se-c-why { margin: -4px 0 0; font-size: 12.5px; color: var(--muted); text-align: right; } .acct .se-confirm { display: grid; gap: 10px; padding: 14px; border-radius: 12px; background: var(--card-2); border: 1px solid color-mix(in srgb, var(--green) 30%, transparent); } .acct .se-confirm .se-c-head { font: 400 15px/1.45 var(--sans); color: var(--ink); } .acct .se-confirm ul { margin: 0; padding-left: 1.1em; display: grid; gap: 4px; font-size: 13.5px; line-height: 1.45; color: var(--ink-2); } .acct .se-confirm .se-c-risk { color: var(--red); } .acct .se-confirm .sub { font-size: 12.5px; } .acct .se-confirm .row { display: flex; flex-wrap: wrap; gap: 8px; } /* backing a seat from USDG (account-seats.js usdgHtml): the pool's quote, and the panel under an own agent's row */ .acct .se-confirm .se-uq { margin: 0; font: 500 14.5px/1.45 var(--sans); color: var(--ink); } .acct .se-confirm.se-usdg .se-c-why { text-align: left; margin: 0; color: var(--red); } .acct #se-mine .se-confirm { margin: 4px 0 12px; } .acct .se-more { display: flex; align-items: center; gap: 12px; margin: 0 0 8px; } .acct .se-more .sub { font-size: 13px; } @media (max-width: 900px) { .acct .se-hero { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 640px) { .acct .se-figs { grid-template-columns: minmax(0, 1fr); } .acct .se-figs > div { grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; } .acct .se-figs > div .sub { grid-column: 1 / -1; } .acct .se-figs > div .label { grid-row: 1; } .acct .se-big b { font-size: 32px; } .acct .se-you { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 12px; gap: 10px; } .acct .se-you b { font-size: 14px; } .acct .se-you-act { grid-column: 1 / -1; justify-content: stretch; } .acct .se-you-act .btn { flex: 1 1 0; } .acct .se-c-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .acct .se-c-acts .btn { flex: 1 1 0; } .acct .se-tools .ga-search { max-width: none; flex: 1 1 100%; } .acct .se-tools .ag-sort { flex: 1 1 100%; } .acct .se-tools .ag-sort select { flex: 1; } } /* the Seats list's Rows view (the default; Cards is the toggle's other side) */ .acct .se-view { display: inline-flex; margin-left: auto; padding: 3px; border-radius: 999px; border: 1px solid var(--card-edge); background: var(--card-2); } .acct .se-view button { border: 0; background: none; color: var(--muted); padding: 6px 13px; border-radius: 999px; font: 500 12.5px/1 var(--sans); cursor: pointer; } .acct .se-view button[aria-pressed="true"] { background: var(--card); color: var(--ink); box-shadow: 0 1px 3px var(--shade); } .acct .se-head, .acct .se-row { display: grid; grid-template-columns: minmax(6.5rem, 1fr) 6.6rem 6.2rem 4rem 5.6rem 3.4rem 5.4rem 3.8rem 10.6rem; align-items: center; gap: 8px; } .acct .se-head { padding: 0 12px 6px; white-space: nowrap; font: 600 11.5px/1.2 var(--sans); letter-spacing: .05em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--rule-2); } .acct .se-head > span:nth-child(n+3):nth-child(-n+8):not(:nth-child(7)) { text-align: right; } .acct .se-head button { border: 0; background: none; padding: 0; font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; cursor: pointer; text-align: right; } .acct .se-head button.on::after { content: "↓"; position: absolute; margin-left: 3px; } .acct .se-head button:hover, .acct .se-head button.on { color: var(--ink); } .acct .se-rows { display: grid; margin: 0 0 10px; } .acct .se-rows > .ga-empty { margin-top: 8px; } .acct .se-row { position: relative; padding: 10px 12px; border-radius: 12px; transition: background .12s; } .acct .se-row:nth-child(even) { background: var(--card-2); } .acct .se-row:hover { background: var(--hover); box-shadow: inset 0 0 0 1px var(--card-edge); } .acct .se-row.on { box-shadow: inset 0 0 0 1.5px var(--green); } .acct .se-r-name { min-width: 0; } .acct .se-r-name b { display: block; font: 600 14.5px/1.25 var(--sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .acct .se-r-name .sub { display: inline; font-weight: 400; } .acct .se-r-st .se-st { white-space: normal; display: inline-block; line-height: 1.15; } .acct .se-r-fee, .acct .se-r-num, .acct .se-r-late { text-align: right; font: 500 14px/1.25 var(--sans); } .acct .se-r-late { text-align: left; } .acct .se-rows { overflow-x: clip; } .acct .se-r-fee b { font: 500 17px/1.1 var(--serif); color: var(--green); white-space: nowrap; } .acct .se-r-late { font-size: 13px; } .acct .se-r-late.warn, .acct .se-r-meta .warn { color: var(--brass); } /* the actions keep to their column (its width fixed, so the header lines up): two buttons that do not fit side by side (French "Voir le registre" + "Proposer une place") go one under the other, never over the Line column */ .acct .se-r-acts { display: inline-flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; min-width: 0; margin-left: 0; white-space: nowrap; } .acct .se-r-acts .btn.sm { padding: 7px 11px; } .acct .se-r-meta, .acct .se-r-tog { display: none; } .acct .se-r-why { display: none; grid-column: 1 / -1; margin: 0; font-size: 12px; color: var(--muted); } /* the reason sits on Back's title and in the need line above; a phone shows it in an opened row */ .acct .se-row .se-confirm { grid-column: 1 / -1; margin-top: 6px; } /* the Rows view's layouts follow the list's own width (the container .se-v4), never the window's: with Go mode's side menu the list is about 370px narrower than the window, so the window's 1100px and 640px left the fixed columns wider than the list from 641 to 1330px, the actions clipped. Each switch is where its columns stop fitting: nine columns need 53.5rem + 8 gaps + the row's padding (944px at 16px), seven need 44.3rem + 6 gaps + padding (781px); the thresholds below are in rem, a little above, so they hold with a larger root font too */ .acct .se-v4 { container: se-list / inline-size; } @container se-list (width < 59.2rem) { .acct .se-head, .acct .se-row { grid-template-columns: minmax(6.5rem, 1fr) 6.6rem 6.2rem 4rem 3.4rem 5.4rem 10.6rem; } .acct .se-r-hide { display: none; } } @media (max-width: 640px) { .acct .se-view { margin-left: 0; } } @container se-list (width < 49rem) { .acct .se-head { display: none; } .acct .se-row { grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "name st fee" "meta meta meta" "acts acts acts"; gap: 6px 8px; padding: 11px 12px; } .acct .se-r-name { grid-area: name; } .acct .se-r-fee { grid-area: fee; } .acct .se-r-st { grid-area: st; } .acct .se-r-meta { grid-area: meta; display: block; font-size: 12.5px; color: var(--muted); } .acct .se-r-st .se-st { font-size: 10.5px; padding: 4px 7px; } .acct .se-r-num, .acct .se-r-late { display: none; } .acct .se-r-acts { grid-area: acts; display: none; } .acct .se-row.open .se-r-acts { display: flex; margin-left: 0; } .acct .se-r-acts .btn { flex: 1 1 0; } .acct .se-r-why { text-align: left; } .acct .se-row.open .se-r-why { display: block; } /* a tap anywhere on the row opens it (its links and buttons above the tap area) */ .acct .se-r-tog { display: block; position: absolute; inset: 0; z-index: 0; border: 0; background: none; border-radius: 12px; cursor: pointer; } .acct .se-r-name a, .acct .se-r-acts, .acct .se-row .se-confirm { position: relative; z-index: 1; } } /* ---- Go mode fixes (2026-10-03 audit) ---- */ /* Home's quick-action doors: never one card alone on a row. Five doors: one row of five when wide, 3 + 2 in the middle, 2 + 2 + 1 (the last spanning both) on a phone */ #ga-doors { grid-template-columns: repeat(6, minmax(0, 1fr)); } #ga-doors > .ga-door { grid-column: span 2; } #ga-doors > .ga-door:nth-last-child(-n+2):nth-child(3n+1), #ga-doors > .ga-door:nth-last-child(-n+2):nth-child(3n+1) ~ .ga-door { grid-column: span 3; } @media (min-width: 1180px) { #ga-doors { grid-template-columns: repeat(5, minmax(0, 1fr)); } #ga-doors > .ga-door, #ga-doors > .ga-door:nth-last-child(-n+2):nth-child(3n+1), #ga-doors > .ga-door:nth-last-child(-n+2):nth-child(3n+1) ~ .ga-door { grid-column: auto; } } @media (max-width: 560px) { #ga-doors { grid-template-columns: repeat(2, minmax(0, 1fr)); } #ga-doors > .ga-door, #ga-doors > .ga-door:nth-last-child(-n+2):nth-child(3n+1), #ga-doors > .ga-door:nth-last-child(-n+2):nth-child(3n+1) ~ .ga-door { grid-column: auto; } #ga-doors > .ga-door:last-child:nth-child(odd) { grid-column: 1 / -1; } } /* Home's Savings card: the rate unread shows "—" in the big slot and this small line under it */ .hm-apy-na { margin: -2px 0 0; font-size: 12.5px; color: var(--muted); } /* the Seats list: Score v2 not read yet */ .acct .se-ld { color: var(--muted); font-size: 12.5px; } /* the Seats rows: room for "Offer seat" (was "Back") beside View record */ /* the actions column has a fixed width: as max-content it collapsed to 0 in the header (an empty cell) and every heading slid one column right of its figures */ .acct .se-head, .acct .se-row { grid-template-columns: minmax(6.5rem, 1fr) 6.6rem 6.4rem 3.6rem 5.6rem 3.2rem 5.4rem 3.6rem 12.6rem; } @container se-list (width < 59.2rem) { .acct .se-head, .acct .se-row { grid-template-columns: minmax(6.5rem, 1fr) 6.6rem 6.4rem 3.6rem 3.2rem 5.4rem 12.6rem; } } @container se-list (width < 49rem) { .acct .se-row { grid-template-columns: minmax(0, 1fr) auto auto; } } /* [desk] the agent001 Desk, the x402 tab's third pane in Go mode (account-desk.js): only with SITE_DESK=on (scripts/build-site.mjs) */ .acct .ax-tabs:has(#ax-tab-desk) { grid-template-columns: repeat(3, minmax(0, 1fr)); } .dk { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; min-width: 0; } .dk-k { display: block; font: 500 12.5px/1.2 var(--sans); color: var(--muted); } .dk-top { display: flex; align-items: center; gap: 12px 20px; flex-wrap: wrap; } .dk-pick { display: grid; gap: 2px; min-width: 0; } .dk-pick select { appearance: none; -webkit-appearance: none; border: 0; background: transparent; padding: 0 22px 0 0; font: 500 24px/1.2 var(--serif); color: var(--ink); cursor: pointer; max-width: 100%; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: right 6px top 55%, right 1px top 55%; background-size: 5px 5px; background-repeat: no-repeat; } .dk-pick select option { background: var(--paper); color: var(--ink); font: 400 15px/1.3 var(--sans); } .dk-pick select:disabled { cursor: default; color: var(--muted); } .dk-pick select:focus-visible { outline: 2px solid var(--green); outline-offset: 4px; } .dk-watch { display: inline-flex; align-items: center; gap: 8px; font: 400 13px/1.3 var(--sans); color: var(--muted); } .dk-watch::before { content: ""; width: 7px; height: 7px; background: var(--faint); } .dk-watch.on::before { background: var(--green); } .dk-top-r { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; } .dk-modelchip { font: 500 12.5px/1 var(--mono); color: var(--muted); background: transparent; border: 1px solid var(--card-edge); border-radius: 10px; padding: 10px 12px; cursor: pointer; max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dk-modelchip.on { color: var(--ink-2); } .dk-modelchip:hover { background: var(--hover); } .dk-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; grid-template-areas: "status status" "chat side"; gap: 22px 28px; align-items: start; } .dk-status { grid-area: status; min-width: 0; } .dk-status > summary { display: none; } .dk-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--card-edge); border-bottom: 1px solid var(--card-edge); } .dk-strip > div { display: grid; gap: 3px; align-content: start; padding: 14px 18px; min-width: 0; } .dk-strip > div + div { border-left: 1px solid var(--card-edge); } .dk-strip > div:first-child { padding-left: 0; } .dk-strip b { font: 500 28px/1.1 var(--serif); color: var(--ink); font-variant-numeric: tabular-nums; } .dk-s { font: 400 12.5px/1.35 var(--sans); color: var(--muted); } .dk-s.g { color: var(--green); } .dk-s.r { color: var(--red); } /* an agent one counted loan short of its next step on backing (account-desk.js stepLine): one line under the strip */ .dk-ladder { margin: 10px 0 0; font: 400 13px/1.4 var(--sans); color: var(--ink-2); } .dk-chat { grid-area: chat; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; min-width: 0; padding: 22px 24px 18px; border-radius: 18px; background: var(--card); border: 1px solid var(--card-edge); } .dk-chat-h { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; } .dk-chat-h h3 { margin: 0; font: 500 24px/1.1 var(--serif); } .dk-chat-h .sub { font-size: 13px; } .dk-chat-h .ac-link { margin-left: auto; } .dk-log { position: relative; list-style: none; margin: 0; padding: 18px 2px 4px; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22px); mask-image: linear-gradient(to bottom, transparent 0, #000 22px); display: flex; flex-direction: column; gap: 14px; min-height: 340px; max-height: 560px; overflow-y: auto; overscroll-behavior: contain; } .dk-day { align-self: center; font: 400 12px/1 var(--sans); color: var(--faint); padding: 2px 0 4px; } .dk-m { max-width: 88%; } .dk-m p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; } .dk-me { align-self: flex-end; padding: 10px 14px; border-radius: 14px 14px 4px 14px; background: var(--ink); color: var(--paper); font: 500 14.5px/1.4 var(--sans); } .dk-bot { align-self: flex-start; padding: 0 0 0 14px; border-left: 2px solid var(--green); font: 400 17.5px/1.5 var(--serif); color: var(--ink); } .dk-who { display: block; margin-bottom: 2px; font: 600 11.5px/1.3 var(--sans); color: var(--green); } .dk-err { align-self: flex-start; font: 400 14px/1.45 var(--sans); color: var(--red); } .dk-step { align-self: flex-start; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font: 400 12.5px/1.3 var(--sans); color: var(--muted); } .dk-step::before { content: "—"; color: var(--faint); } .dk-step code { font-size: 11.5px; color: var(--faint); } .dk-card { align-self: flex-start; width: min(100%, 500px); padding: 18px 20px 16px; border-radius: 14px; background: var(--paper); border: 1px solid var(--rule); display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; } .dk-card header { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; } .dk-card header b { font: 500 23px/1.15 var(--serif); color: var(--ink); } .dk-card header span { font: 400 13px/1.2 var(--sans); color: var(--muted); text-align: right; } .dk-card dl { margin: 0; display: grid; } .dk-card dl > div { display: flex; justify-content: space-between; gap: 16px; padding: 7px 0; border-top: 1px solid var(--rule-2); } .dk-card dt { font: 400 13.5px/1.35 var(--sans); color: var(--muted); white-space: nowrap; } .dk-card dd { margin: 0; font: 500 13.5px/1.35 var(--sans); color: var(--ink); text-align: right; } .dk-fix { display: grid; gap: 8px; margin: 2px 0 0; } .dk-fix-i { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; } .dk-fix-n { font: 400 12.5px/1.3 var(--sans); color: var(--muted); } .dk-note { margin: 0; font: 400 13px/1.45 var(--sans); color: var(--muted); } .dk-warn { margin: 0; padding: 9px 12px; border-radius: 8px; background: var(--brass-soft); font: 400 13px/1.45 var(--sans); color: var(--ink-2); } .dk-act { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 2px; } .dk-alt { margin-left: auto; } .dk-card .dk-st:empty { display: none; } .dk-card.done { border-color: var(--green); } .dk-card.off { opacity: .62; } .dk-card.dk-again { border-color: var(--green); box-shadow: 0 0 0 3px var(--green-soft); } .dk-pickc { align-self: flex-start; width: min(100%, 500px); } .dk-pickc ul { list-style: none; margin: 0; padding: 0; border-radius: 14px; border: 1px solid var(--rule); background: var(--paper); } .dk-pickc li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 14px; } .dk-pickc li + li { border-top: 1px solid var(--rule-2); } .dk-pick-n { display: grid; gap: 1px; } .dk-pick-n b { font: 500 16px/1.2 var(--serif); } .dk-pick-n span { font: 400 12.5px/1.2 var(--sans); color: var(--muted); } .dk-chips { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 12px; border-top: 1px solid var(--card-edge); } .dk-chip { padding: 9px 13px; border-radius: 10px; border: 1px solid var(--card-edge); background: var(--paper); color: var(--ink-2); font: 500 13.5px/1.2 var(--sans); cursor: pointer; white-space: nowrap; } .dk-chip:hover { border-color: var(--green); color: var(--green); } .dk-chip:disabled { opacity: .5; cursor: default; } .dk-more { background: transparent; color: var(--muted); } .dk-form { display: flex; align-items: flex-end; gap: 8px; padding: 8px 8px 8px 14px; border-radius: 14px; border: 1px solid var(--field-edge); background: var(--paper); } .dk-form:focus-within { border-color: var(--green); } .dk-form textarea { flex: 1; min-width: 0; resize: none; border: 0; background: transparent; padding: 8px 0; font: 400 16px/1.4 var(--sans); color: var(--ink); max-height: 140px; } .dk-form textarea:focus { outline: none; box-shadow: none; } .dk-fine { margin: -4px 0 0; font: 400 12px/1.3 var(--sans); color: var(--faint); } .dk-side { grid-area: side; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; min-width: 0; } .dk-night { border-radius: 18px; overflow: hidden; background: var(--night); color: var(--night-ink); } .dk-scene { position: relative; height: 210px; overflow: hidden; background: radial-gradient(120% 90% at 50% 105%, #1d2a22 0%, #121a15 45%, var(--night) 100%); } .dk-scene svg { display: block; width: 100%; height: auto; } .dk-scene .dk-tree { position: absolute; inset: 6px 0 0; width: 100%; height: calc(100% - 6px); display: block; cursor: grab; } .dk-sky { position: absolute; inset: 0; pointer-events: none; } .dk-moon { position: absolute; top: 18px; right: 24px; width: 22px; height: 22px; border-radius: 50%; box-shadow: 6px -3px 0 0 #efe6cf; filter: drop-shadow(0 0 6px rgba(239, 230, 207, .35)); } .dk-stars { position: absolute; top: 0; left: 0; width: 1.5px; height: 1.5px; border-radius: 50%; background: transparent; box-shadow: 22px 18px #cfc8b4, 58px 40px #9b9788, 96px 12px #e8e2d2, 140px 34px #9b9788, 176px 20px #cfc8b4, 214px 46px #9b9788, 250px 14px #e8e2d2, 30px 70px #9b9788, 120px 64px #cfc8b4, 200px 78px #9b9788, 236px 96px #cfc8b4, 72px 98px #9b9788; animation: dk-twinkle 4.2s ease-in-out infinite; } .dk-stars-2 { transform: translate(11px, 7px); animation-delay: -2.1s; animation-duration: 5.4s; opacity: .7; } @keyframes dk-twinkle { 0%, 100% { opacity: .9; } 50% { opacity: .35; } } .dk-fly { position: absolute; bottom: 30px; left: 30%; width: 3px; height: 3px; border-radius: 50%; background: #d8f5c8; box-shadow: 0 0 6px 2px rgba(190, 240, 170, .55); opacity: 0; animation: dk-fly 7s ease-in-out infinite; } .dk-fly:nth-of-type(5) { left: 22%; bottom: 46px; animation-delay: -1.8s; animation-duration: 8.5s; } .dk-fly:nth-of-type(6) { left: 70%; bottom: 36px; animation-delay: -3.6s; animation-duration: 6.4s; } .dk-fly:nth-of-type(7) { left: 80%; bottom: 60px; animation-delay: -5.1s; animation-duration: 9s; } @keyframes dk-fly { 0% { opacity: 0; transform: translate(0, 0); } 20% { opacity: .9; } 50% { transform: translate(14px, -22px); opacity: .6; } 80% { opacity: .9; } 100% { opacity: 0; transform: translate(-6px, -40px); } } @media (prefers-reduced-motion: reduce) { .dk-stars, .dk-fly { animation: none; } .dk-fly { opacity: .6; } } /* the page's "needs your attention" line repeats what the Desk shows once its pane is open */ .ga-notice:has(+ #ac-a001.ga-on) { display: none; } .dk-nfigs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; border-top: 1px solid var(--night-rule); } .dk-nfigs > div { padding: 12px 8px 4px; min-width: 0; } .dk-nfigs > div:first-child { padding-left: 14px; } .dk-nfigs > div + div { border-left: 1px solid var(--night-rule); } .dk-nfigs dt { font: 400 11px/1.2 var(--sans); color: var(--night-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dk-nfigs dd { margin: 4px 0 0; font: 500 24px/1 var(--serif); color: var(--night-ink); } .dk-ncap { margin: 0; padding: 4px 14px 12px; font: 400 11.5px/1.3 var(--sans); color: var(--night-muted); } .dk-feed-h { margin: 6px 0 0; font: 500 20px/1.2 var(--serif); } .dk-feed { list-style: none; margin: 0; padding: 0; display: grid; } .dk-fday { padding: 10px 0 4px; font: 500 12px/1.2 var(--sans); color: var(--faint); } .dk-ev { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 10px; padding: 9px 0; border-top: 1px solid var(--rule-2); } .dk-ev time { font: 400 12px/1.5 var(--mono); color: var(--faint); } .dk-ev p { margin: 0; font: 400 14px/1.4 var(--sans); color: var(--ink); } .dk-actor { display: block; font: 600 11.5px/1.4 var(--sans); color: var(--green); } .dk-evl { color: inherit; text-decoration: none; } .dk-evl:hover { text-decoration: underline; text-underline-offset: 3px; } .dk-empty { padding: 10px 0; font: 400 13.5px/1.4 var(--sans); color: var(--muted); } .dk-drawer { position: fixed; inset: 0; z-index: 300; } .dk-veil { position: absolute; inset: 0; background: rgba(15, 20, 17, .38); } .dk-panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(460px, 100%); overflow-y: auto; overscroll-behavior: contain; background: var(--paper); box-shadow: -18px 0 48px var(--shade); padding: 24px 26px 40px; display: grid; align-content: start; gap: 8px; } .dk-panel > header { display: flex; justify-content: space-between; align-items: center; } .dk-panel h3 { margin: 0; font: 500 28px/1.1 var(--serif); } .dk-x { width: 40px; height: 40px; border: 0; background: transparent; color: var(--ink); font: 400 26px/1 var(--sans); cursor: pointer; border-radius: 10px; } .dk-x:hover { background: var(--hover); } .dk-sec { display: grid; gap: 10px; padding: 18px 0; border-top: 1px solid var(--rule-2); } .dk-sec h4 { margin: 0; font: 500 20px/1.2 var(--serif); } .dk-p { margin: 0; font: 400 14px/1.5 var(--sans); color: var(--ink-2); } .dk-quiet { font-size: 12.5px; color: var(--muted); } .dk-seg { display: inline-flex; padding: 3px; gap: 3px; border-radius: 12px; background: var(--card-2); border: 1px solid var(--card-edge); justify-self: start; } .dk-seg label { position: relative; } .dk-seg input { position: absolute; opacity: 0; pointer-events: none; } .dk-seg span { display: block; padding: 8px 12px; border-radius: 9px; font: 500 13.5px/1 var(--sans); color: var(--muted); cursor: pointer; } .dk-seg input:checked + span { background: var(--ink); color: var(--paper); } .dk-seg input:focus-visible + span { outline: 2px solid var(--green); outline-offset: 1px; } .dk-rent { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 14px; background: var(--card-2); } .dk-rent > div { display: grid; gap: 3px; flex: 1; } .dk-rent b { font: 500 15px/1.2 var(--sans); } .dk-rent span { font: 400 12.5px/1.4 var(--sans); color: var(--muted); } .dk-help { font: 400 13px/1.45 var(--sans); color: var(--ink-2); } .dk-help summary { cursor: pointer; color: var(--ink); font-weight: 500; width: fit-content; } .dk-help > div { display: grid; gap: 8px; padding: 8px 0 2px; } .dk-help-s { margin: 0; padding-left: 20px; display: grid; gap: 4px; } .dk-help a { overflow-wrap: anywhere; } html.dk-cb body { visibility: hidden; } .dk-linkc { border-style: dashed; } .dk-keyrow { display: flex; gap: 8px; } .dk-keyrow input { flex: 1; min-width: 0; height: 42px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--field-edge); background: var(--field); color: var(--ink); font: 14px var(--sans); } .dk-check, .dk-switch { display: flex; gap: 10px; align-items: flex-start; font: 400 13.5px/1.4 var(--sans); color: var(--ink-2); cursor: pointer; } .dk-check input, .dk-switch input { margin-top: 3px; accent-color: var(--green); } .dk-switch > span { display: grid; gap: 2px; } .dk-switch b { font-weight: 500; color: var(--ink); } .dk-switch > span > span { font-size: 12.5px; color: var(--muted); } .dk-modelrow { display: grid; gap: 6px; font: 500 13px/1.2 var(--sans); color: var(--muted); } .dk-modelrow select { height: 42px; border-radius: 10px; border: 1px solid var(--field-edge); background: var(--field); color: var(--ink); font: 13.5px var(--mono); padding: 0 10px; max-width: 100%; } .dk-conn { display: flex; justify-content: space-between; align-items: center; gap: 12px; font: 400 13.5px/1.4 var(--sans); color: var(--ink-2); } .dk-steps { margin: 0; padding-left: 20px; display: grid; gap: 12px; font: 400 14px/1.45 var(--sans); color: var(--ink-2); } .dk-steps li { min-width: 0; } .dk-code { display: flex; align-items: flex-start; gap: 8px; margin-top: 6px; padding: 9px 10px; border-radius: 10px; background: var(--card-2); } .dk-code code { flex: 1; min-width: 0; font: 400 12px/1.5 var(--mono); color: var(--ink); overflow-wrap: anywhere; white-space: pre-wrap; } .dk-code .btn { flex: none; padding: 7px 10px; font-size: 12.5px; } html.dk-lock, html.dk-lock body { overflow: hidden; } @media (max-width: 1100px) { .dk-grid { grid-template-columns: minmax(0, 1fr) 260px; } .dk-strip b { font-size: 24px; } } @media (max-width: 900px) { .dk-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "chat" "status" "side"; gap: 16px; } .dk-status { border-radius: 14px; background: var(--card); border: 1px solid var(--card-edge); } .dk-status > summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 13px 16px; cursor: pointer; list-style: none; font: 500 13.5px/1.35 var(--sans); color: var(--ink-2); } .dk-status > summary::-webkit-details-marker { display: none; } .dk-status > summary::after { content: "+"; font: 400 18px/1 var(--sans); color: var(--muted); } .dk-status[open] > summary::after { content: "−"; } .dk-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); border-bottom: 0; margin: 0 16px; } .dk-strip > div, .dk-strip > div:first-child { padding: 12px 12px 12px 0; } .dk-strip > div + div { border-left: 0; } .dk-strip > div:nth-child(even) { padding-left: 14px; border-left: 1px solid var(--card-edge); } .dk-strip > div:nth-child(n+3) { border-top: 1px solid var(--card-edge); } .dk-strip b { font-size: 22px; } .dk-ladder { margin: 0 16px 14px; padding-top: 10px; border-top: 1px solid var(--card-edge); } } @media (max-width: 640px) { .acct .ax-tabs:has(#ax-tab-desk) { gap: 4px; padding: 4px; } .acct .ax-tabs:has(#ax-tab-desk) .ax-tab { padding: 10px 8px; text-align: center; } .acct .ax-tabs:has(#ax-tab-desk) .ax-tab span { display: none; } .acct .ax-tabs:has(#ax-tab-desk) .ax-tab b { font-size: 16px; } .dk-top { gap: 10px; } .dk-top-r { margin-left: 0; width: 100%; } .dk-modelchip { flex: 1; min-width: 0; max-width: none; text-align: left; } .dk-chat { padding: 16px 14px 14px; border-radius: 16px; } .dk-chat-h .sub { display: none; } .dk-log { min-height: 260px; max-height: 62vh; } .dk-m { max-width: 94%; } .dk-bot { font-size: 16.5px; } .dk-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -14px; padding: 12px 14px 2px; } .dk-chips::-webkit-scrollbar { display: none; } .dk-chips .dk-more { display: none; } .dk-chips .dk-more-i[hidden] { display: inline-block !important; } .dk-card { padding: 16px 14px 14px; } .dk-card header b { font-size: 21px; } .dk-panel { padding: 20px 18px 36px; } .dk-scene { height: 170px; } .dk-scene svg { height: 150px; } } /* Go mode launch (2026-10-09, with launch-states.css): the night panel's figures shimmer in its own ink before the first read; on a phone the preset chips scroll sideways, snapping, and fade at the edge so the next one shows there is more */ .dk-nfigs .sk.pst-fig { min-width: 2.4em; background: linear-gradient(90deg, color-mix(in srgb, var(--night-ink) 9%, transparent) 25%, color-mix(in srgb, var(--night-ink) 18%, transparent) 50%, color-mix(in srgb, var(--night-ink) 9%, transparent) 75%); background-size: 200% 100%; } .dk-strip .sk.pst-fig { min-width: 3.4em; justify-self: start; } .dk-feed > .pst-li { padding: 6px 0 0; } @media (max-width: 640px) { .dk-chips { padding-right: 44px; scroll-snap-type: x proximity; scroll-padding-inline: 14px; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 44px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 44px), transparent 100%); } .dk-chips > .dk-chip { flex: none; scroll-snap-align: start; } } /* agent001, 2026-10-11 (the UI pass): a figure's or a card row's hint (the shared hints of account-page.js: hover, focus, tap, Esc), the chips the log offers, Details under a card's one warning, a provider's error with its buttons, Stop; on a wide screen the chat fits the screen from where it starts (account-desk.js fitChat) and its log scrolls inside it; on a phone the message box stays above the tab bar; a finger gets 44 px targets */ .dk-hint { display: inline; padding: 0; margin: 0; border: 0; background: none; font: inherit; color: inherit; text-align: inherit; cursor: help; text-decoration: underline dotted; text-decoration-color: var(--faint); text-underline-offset: 3px; } .dk-hint:hover, .dk-hint[aria-expanded="true"] { color: var(--green); text-decoration-color: currentColor; } .dk-hint:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; border-radius: 3px; } .dk-card dt .dk-hint { white-space: normal; } .dk-pops { display: contents; } .dk-det { font: 400 13px/1.45 var(--sans); color: var(--muted); } .dk-det summary { cursor: pointer; width: fit-content; color: var(--ink-2); font-weight: 500; padding: 4px 0; } .dk-det .dk-note { margin-top: 6px; } .dk-offer-c { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; font-family: var(--sans); } .dk-offer-m { display: inline-block; margin-top: 10px; font-size: 13px; } .dk-next p { font-size: 16px; } .dk-err-a { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; } .dk-err-a .btn { color: var(--ink); } .dk-sum-t { min-width: 0; } #dk-send.dk-stopb { background: var(--ink); color: var(--paper); border-color: var(--ink); } .dk-side { padding-bottom: 72px; } /* the bell (bottom right) never covers a switch */ @media (min-width: 901px) { .dk-chat { position: sticky; top: calc(var(--ga-top, 64px) + 12px); height: min(var(--dk-chat-h, calc(100vh - var(--ga-top, 64px) - 24px)), calc(100vh - var(--ga-top, 64px) - 24px)); min-height: 460px; grid-template-rows: auto minmax(0, 1fr) auto auto auto; align-content: stretch; } .dk-log { min-height: 0; max-height: none; } } @media (max-width: 900px) { .dk-form { position: sticky; bottom: calc(var(--ga-bar-h, 0px) + env(safe-area-inset-bottom) + 8px); z-index: 4; box-shadow: 0 -10px 18px -12px var(--shade); } .dk-side { padding-bottom: 0; } } @media (pointer: coarse) { .dk-pick select { min-height: 44px; } .dk .ac-link, .dk-chat-h .ac-link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; } .dk .switch::before { content: ""; position: absolute; inset: -11px -4px; } .dk-chip { min-height: 44px; } .dk-hint { padding: 6px 0; } } /* Automations: the side column's list (account-desk.js paintAuto) and Settings' Repay on time block */ .dk-autos { display: grid; gap: 6px; } .dk-autos > header { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; } .dk-autos h4 { margin: 0; font: 500 20px/1.2 var(--serif); } .dk-autos .dk-fine { margin: 2px 0 0; } .dk-autol { list-style: none; margin: 0; padding: 0; display: grid; } .dk-ai { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--rule-2); } .dk-ai-t { display: grid; gap: 2px; min-width: 0; } .dk-ai-t b { font: 500 14.5px/1.3 var(--sans); color: var(--ink); } .dk-ai-s { font: 400 12.5px/1.4 var(--sans); color: var(--muted); } .dk-ai.warn .dk-ai-s { color: var(--brass, #8a6d1f); } .dk-ai-top { justify-self: start; margin-top: 2px; font-size: 12.5px; } .dk-ai .switch { margin-top: 2px; } .switch:disabled { opacity: .45; cursor: not-allowed; } .dk-ar, .dk-hp { display: grid; gap: 8px; padding: 14px 16px; border-radius: 14px; background: var(--card-2); } .dk-ar-h, .dk-hp-h { display: flex; justify-content: space-between; align-items: center; gap: 10px; } .dk-ar-h b, .dk-hp-h b { font: 500 15px/1.3 var(--sans); color: var(--ink); } .dk-ar-f { display: grid; gap: 8px; } .dk-pill { padding: 3px 9px; border-radius: 999px; border: 1px solid var(--card-edge); font: 500 12px/1.3 var(--sans); color: var(--muted); } .dk-pill.on { border-color: var(--green); color: var(--green); } .dk-fld { display: flex; align-items: center; justify-content: space-between; gap: 10px; font: 400 13.5px/1.3 var(--sans); color: var(--ink-2); } .dk-in { display: inline-flex; align-items: center; gap: 4px; height: 36px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--field-edge); background: var(--field); color: var(--muted); font: 14px var(--mono); } .dk-in input, .dk-in input:focus, .acct .dk-in input:not([type="radio"]):not([type="checkbox"]), .acct .dk-in input:not([type="radio"]):not([type="checkbox"]):focus { width: 90px; height: auto; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 0; box-shadow: none; background: transparent; color: var(--ink); font: inherit; outline: none; } .dk-in:focus-within { border-color: var(--green); } .dk-in input:disabled { color: var(--faint); } .dk-ar-figs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 2px 0; } .dk-ar-figs dt { font: 400 12px/1.2 var(--sans); color: var(--muted); } .dk-ar-figs dd { margin: 3px 0 0; font: 500 13.5px/1.35 var(--sans); color: var(--ink); font-variant-numeric: tabular-nums; } .dk-ar-act { display: flex; flex-wrap: wrap; gap: 8px; } .dk-warnl { font-size: 13px; color: var(--brass, #8a6d1f); } /* the Desk on a touch screen, with the rest of Go mode's touch rules (launch-shell.css): 44 px controls (a hint keeps its size, with the room around it), 16 px fields (its agent picker keeps its 24 px), and 12 px figures' labels on a phone */ @media (pointer: coarse) { html[data-go-page] :is(.dk-modelchip, .dk-x) { min-height: 44px; } html[data-go-page] .dk-x { min-width: 44px; } html[data-go-page] :is(.dk-keyrow input, .dk-modelrow select) { height: 44px; } html[data-go-page] :is(.dk-hint, .dk-help > summary) { position: relative; } html[data-go-page] .dk-hint::before, html[data-go-page] .dk-help > summary::after { content: ""; position: absolute; inset: -12px -6px; } html[data-go-page] .dk-pick :is(select, textarea, input:not([type="checkbox"]):not([type="radio"]):not([type="range"])):not(.tf-code):not(.lc-amt input) { font-size: 24px !important; } } @media (max-width: 640px) { body.goapp .dk-nfigs dt { font-size: 12px; } } /* agent001's launch run (desk-launch.js, SITE_A001_LAUNCH=on): its panel above the chat, a card's lede line */ .dk-lede { margin: -4px 0 0; font: 400 14px/1.45 var(--sans); color: var(--ink-2); } .dk-lx { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 16px 18px 14px; border-radius: 14px; background: var(--paper); border: 1px solid var(--rule); } .dk-lx[hidden] { display: none; } .dk-lx-h { display: flex; align-items: baseline; justify-content: space-between; gap: 6px 14px; flex-wrap: wrap; } .dk-lx-ttl { display: flex; align-items: baseline; gap: 4px 12px; flex-wrap: wrap; min-width: 0; } .dk-lx-ttl b { font: 500 22px/1.15 var(--serif); color: var(--ink); } .dk-lx-n { font: 500 12.5px/1.2 var(--sans); color: var(--muted); font-variant-numeric: tabular-nums; } .dk-lx-acts { display: inline-flex; gap: 16px; } .dk-lx .ac-link:disabled { opacity: .45; cursor: not-allowed; } .dk-lx-lede { margin: -4px 0 0; font: 400 13px/1.45 var(--sans); color: var(--muted); } .dk-lx-rail { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; } .dk-lx-i { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 7px; padding-top: 9px; border-top: 2px solid var(--rule); font: 500 12.5px/1.25 var(--sans); color: var(--muted); min-width: 0; } .dk-lx-i.done, .dk-lx-i.skip { border-top-color: var(--green); } .dk-lx-i.now { border-top-color: var(--ink); color: var(--ink); } .dk-lx-dot { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--card-edge); font: 600 11px/1 var(--sans); font-variant-numeric: tabular-nums; } .dk-lx-i.done .dk-lx-dot { background: var(--green); border-color: var(--green); color: var(--paper); } .dk-lx-i.skip .dk-lx-dot { color: var(--faint); } .dk-lx-i.now .dk-lx-dot { border-color: var(--ink); background: var(--ink); color: var(--paper); } .dk-lx-l { overflow-wrap: anywhere; } .dk-lx-key { display: grid; gap: 8px; padding: 12px 14px; border-radius: 12px; background: var(--card-2); border: 1px solid var(--card-edge); } .dk-lx-key[hidden], .dk-lx-body[hidden], .dk-lx-note[hidden] { display: none; } .dk-lx-note { display: grid; gap: 8px; padding: 10px 14px; border-radius: 12px; background: var(--card-2); border: 1px solid var(--card-edge); } .dk-lx-note.warn { background: var(--brass-soft); border-color: transparent; } .dk-lx-note .dk-p { font-size: 13.5px; overflow-wrap: anywhere; } .dk-lx-key .row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .dk-lx-key .sub { margin: 0; font: 400 12.5px/1.4 var(--sans); color: var(--muted); overflow-wrap: anywhere; } .dk-lx-body { display: grid; gap: 10px; min-width: 0; } .dk-lx-need { color: var(--ink); } .dk-lx-have { font-weight: 500; } .dk-lx-add { margin: 0; } .dk-lx-addr { display: flex; align-items: center; gap: 8px; font: 13px var(--mono); color: var(--ink); overflow-wrap: anywhere; } .dk-lx-fld { display: grid; gap: 5px; font: 500 12.5px/1.2 var(--sans); color: var(--muted); max-width: 360px; } .dk-lx-fld > input, .dk-lx-at { height: 40px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--field-edge); background: var(--field); color: var(--ink); font: 400 15px/1.2 var(--sans); } .acct .dk-lx-fld > input { margin: 0; min-height: 40px; } .dk-lx-at { display: flex; align-items: center; gap: 2px; color: var(--muted); } .dk-lx-at input, .acct .dk-lx-at input:not([type="radio"]):not([type="checkbox"]) { flex: 1; min-width: 0; height: auto; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 0; box-shadow: none; background: transparent; color: var(--ink); font: inherit; outline: none; } .dk-lx-at:focus-within, .dk-lx-fld > input:focus { border-color: var(--green); outline: none; } .dk-lx-fld .dk-in { justify-self: start; } .dk-lx-way { display: grid; gap: 8px; } .dk-lx-way:empty { display: none; } .dk-lx-opt { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--card-edge); background: var(--card); cursor: pointer; } .dk-lx-opt:has(input:checked) { border-color: var(--green); } .dk-lx-opt:has(input:disabled) { opacity: .6; cursor: default; } .dk-lx-opt input { margin: 3px 0 0; accent-color: var(--green); } .dk-lx-opt > span { display: grid; gap: 2px; } .dk-lx-opt b { font: 500 14px/1.3 var(--sans); color: var(--ink); } .dk-lx-opt span span { font: 400 12.5px/1.4 var(--sans); color: var(--muted); } .dk-lx-opt2 { display: grid; gap: 6px; padding: 12px 14px; border-radius: 12px; background: var(--card-2); } .dk-lx-opt2 > b { font: 500 14.5px/1.3 var(--sans); color: var(--ink); } .dk-lx-opt2 .btn { justify-self: start; } .dk-lx-act { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; } .dk-lx-code { padding: 8px 10px; border-radius: 9px; background: var(--paper); border: 1px solid var(--rule); font: 12.5px var(--mono); color: var(--ink); overflow-wrap: anywhere; min-width: 0; } .dk-lx-post { margin: 0; padding: 10px 14px; border-left: 2px solid var(--green); background: var(--card-2); border-radius: 0 10px 10px 0; font: 400 14.5px/1.5 var(--sans); color: var(--ink); overflow-wrap: anywhere; } .dk-lx-big { margin: 0; font: 500 22px/1.2 var(--serif); color: var(--ink); } .dk-lx-sum { list-style: none; margin: 0; padding: 0; display: grid; } .dk-lx-sum li { display: flex; justify-content: space-between; gap: 16px; padding: 7px 0; border-top: 1px solid var(--rule-2); font: 400 13.5px/1.35 var(--sans); color: var(--muted); } .dk-lx-sum li b { font-weight: 500; color: var(--ink); text-align: right; } .dk-lx-s:empty { display: none; } .dk-lx-paused .btn { justify-self: start; } .lp-a001 { margin: 4px 0 0; text-align: right; } .lp-a001 .ac-link { font-size: 13px; } @media (max-width: 640px) { .dk-lx { padding: 14px 14px 12px; } .dk-lx-rail { display: flex; gap: 6px; } .dk-lx-i { flex: 0 0 auto; grid-template-columns: auto; } .dk-lx-i .dk-lx-l { display: none; } .dk-lx-i.now { flex: 1 1 auto; grid-template-columns: auto minmax(0, 1fr); } .dk-lx-i.now .dk-lx-l { display: block; } .dk-lx-sum li { flex-direction: column; gap: 2px; } .dk-lx-sum li b { text-align: left; } } /* the run's panel shown: a row of its own above the chat's log, on a wide screen (account-desk.js fitChat) */ @media (min-width: 901px) { .dk-chat:has(> .dk-lx:not([hidden])) { grid-template-rows: auto auto minmax(0, 1fr) auto auto auto; } } /* the run's fields on a touch screen: 44 px tall (the rest of the Desk's touch rules are before the run's styles) */ @media (pointer: coarse) { html[data-go-page] :is(.dk-lx-fld > input, .dk-lx-at) { height: 44px; } } /* [/desk] */ /* [v5] Back agents on the Seats tab (account-v5.js: the totals, the Back / Close card with its agent picker, Your backing, Agents that repay): only with SITE_V5=on (scripts/build-site.mjs) */ .v5 { display: grid; gap: 20px; margin: 4px 0 22px; min-width: 0; } .v5-hero, .v5-main, .v5-mineCol, .v5-ex { min-width: 0; scroll-margin-top: 84px; } .v5-h { margin: 0; font: 600 18px/1.25 var(--sans); color: var(--ink); } .v5-h4 { margin: 0; font: 600 14.5px/1.3 var(--sans); color: var(--ink); } .v5-unit { font: 500 13px/1 var(--sans); color: var(--muted); letter-spacing: 0; } .v5-av { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--green-soft); color: var(--green); font: 600 15px/1 var(--sans); } .v5-chip { display: inline-block; padding: 3px 9px; border-radius: 999px; background: color-mix(in srgb, var(--ink) 7%, transparent); color: var(--ink-2); font: 500 12px/1.3 var(--sans); overflow-wrap: anywhere; } .v5-chip.ok { background: var(--green-soft); color: var(--green); } .v5-chip.warn { background: var(--red-soft); color: var(--red); } /* the totals: four tiles, the line under them */ .v5-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } .v5-tile { display: grid; align-content: start; gap: 6px; min-width: 0; min-height: 96px; box-sizing: border-box; padding: 14px 16px; border-radius: 16px; background: var(--card-2); border: 1px solid var(--card-edge); } .v5-tile .label { font: 500 12.5px/1.25 var(--sans); color: var(--muted); } .v5-tile b { justify-self: start; font: 600 26px/1.1 var(--sans); color: var(--ink); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; } .v5-tile .sub { justify-self: start; font: 400 13px/1.35 var(--sans); color: var(--ink-2); overflow-wrap: anywhere; } .v5-fine { margin: 10px 2px 0; font: 400 13px/1.4 var(--sans); color: var(--muted); } .v5-fine[hidden] { display: none; } /* the card and Your backing side by side */ .v5-grid { display: grid; grid-template-columns: minmax(0, 560px) minmax(0, 1fr); gap: 20px; align-items: start; } .v5-main { display: grid; gap: 14px; padding: 18px; border-radius: 20px; background: var(--card); border: 1px solid var(--card-edge); box-shadow: 0 10px 30px -18px var(--shade); } /* the agent picker */ .v5-pick { position: relative; display: grid; gap: 6px; } .v5-pick > .label { font: 500 12.5px/1.2 var(--sans); color: var(--muted); } .v5-pick-b, .v5-pick-o { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 4px 12px; width: 100%; box-sizing: border-box; margin: 0; color: inherit; font: inherit; text-align: left; } .v5-pick-b { padding: 10px 12px; border-radius: 14px; background: var(--card-2); border: 1px solid var(--card-edge); } button.v5-pick-b { grid-template-columns: 34px minmax(0, 1fr) auto 14px; cursor: pointer; } button.v5-pick-b:hover { border-color: var(--field-edge); } button.v5-pick-b:focus-visible, .v5-pick-o:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; } .v5-pick-t { display: grid; gap: 2px; min-width: 0; } .v5-pick-n { overflow-wrap: anywhere; } .v5-pick-n b { font: 600 15.5px/1.25 var(--sans); color: var(--ink); } .v5-pick-n .sub { font-size: 13px; } .v5-pick-rec { font: 400 13px/1.35 var(--sans); color: var(--muted); overflow-wrap: anywhere; } .v5-pick-c { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; } .v5-chev { width: 7px; height: 7px; margin: -4px 0 0 2px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); rotate: 45deg; } [aria-expanded="true"] > .v5-chev { rotate: 225deg; margin-top: 4px; } .v5-pick-list { position: absolute; z-index: 20; left: 0; right: 0; top: 100%; display: grid; gap: 4px; max-height: 360px; overflow-y: auto; margin: 6px 0 0; padding: 6px; list-style: none; border-radius: 16px; background: var(--card); border: 1px solid var(--card-edge); box-shadow: 0 18px 40px -16px var(--shade), 0 2px 8px var(--shade); } .v5-pick-list[hidden] { display: none; } .v5-pick-o { padding: 8px 10px; border: 0; border-radius: 12px; background: none; cursor: pointer; } .v5-pick-o:hover { background: var(--card-2); } .v5-pick-o[aria-pressed="true"] { background: var(--glow); } /* the segmented switches (Back | Close, $PRIORS | USDG, Take it as), as the cockpit's (launch-home.css .lc-seg) */ .v5-seg { display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; padding: 4px; border-radius: 14px; background: var(--card-2); box-shadow: inset 0 0 0 1px var(--card-edge); } .v5-seg button { appearance: none; margin: 0; padding: 11px 16px; border: 0; border-radius: 10px; background: none; color: var(--ink-2); font: 500 14.5px/1 var(--sans); white-space: nowrap; cursor: pointer; } .v5-seg button:hover { color: var(--ink); } .v5-seg button.on, .v5-seg button[aria-pressed="true"] { background: var(--card); color: var(--ink); font-weight: 600; box-shadow: 0 0 0 1px var(--card-edge), 0 6px 14px -10px var(--shade); } .v5-seg button:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; } .v5-seg button[aria-disabled="true"] { color: var(--faint); cursor: help; text-decoration: underline dotted color-mix(in srgb, var(--ink) 30%, transparent); text-underline-offset: 3px; } .v5-seg button:disabled { color: var(--faint); cursor: not-allowed; } .v5-side { display: grid; } .v5-tok button { padding: 8px 12px; font-size: 13.5px; } /* the amount */ .v5-box { display: grid; gap: 12px; } .v5-amt-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .v5-amt-h label { font: 600 14px/1.2 var(--sans); color: var(--ink); } .v5-amt { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: 16px; background: var(--field); border: 1px solid var(--field-edge); } .v5-amt:focus-within { outline: 2px solid var(--green); outline-offset: -1px; } #v5 #v5-amount { flex: 1 1 auto; width: 100%; min-width: 0; margin: 0; padding: 4px 0; border: 0; border-radius: 0; background: none; box-shadow: none; font: 600 32px/1.2 var(--sans); color: var(--ink); font-variant-numeric: tabular-nums; } #v5 #v5-amount:focus { border: 0; box-shadow: none; } #v5 #v5-amount:focus-visible { outline: none; } /* one ring: .v5-amt:focus-within draws it around the whole field */ #v5 #v5-amount[aria-invalid="true"] { color: var(--red); } .v5-amt-u { flex: none; font: 600 14px/1 var(--sans); color: var(--muted); } .v5-body { display: grid; gap: 12px; } .v5-chips { display: flex; flex-wrap: wrap; gap: 8px; } .v5-chips button, .v5-fchip { position: relative; min-height: 36px; margin: 0; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--card-edge); background: var(--card-2); color: var(--ink-2); font: 500 13.5px/1.1 var(--sans); cursor: pointer; } .v5-chips button::before, .v5-stop-b::before, .v5-fchip::before { content: ""; position: absolute; inset: -6px; } /* a 44 px target for a finger */ .v5-chips button:hover, .v5-fchip:hover { border-color: var(--field-edge); color: var(--ink); } .v5-fchip[aria-pressed="true"] { border-color: var(--green); background: var(--glow); color: var(--ink); } .v5-chips button:focus-visible, .v5-fchip:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; } .v5-bal { margin: -4px 0 0; font: 400 13.5px/1.4 var(--sans); color: var(--muted); } .v5-bal .k { margin-left: 6px; } .v5-conv { margin: 0; font: 500 14px/1.45 var(--sans); color: var(--ink-2); } .v5-conv:empty { display: none; } .v5-conv.warn { color: var(--red); } /* the open line's two amounts: the least, the full line */ .v5-open { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .v5-fill { display: grid; justify-items: start; gap: 4px; min-width: 0; margin: 0; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--card-edge); background: var(--card-2); color: inherit; font: inherit; text-align: left; cursor: pointer; } .v5-fill span { font: 500 12.5px/1.3 var(--sans); color: var(--muted); } .v5-fill b { font: 600 16px/1.2 var(--sans); color: var(--ink); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; } .v5-fill:hover { border-color: var(--green); } .v5-fill:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; } .v5-open-note { margin: -4px 0 0; font-size: 13px; } /* the line steps: the line now, what this amount adds (hatched), what the step allows (dashed), a stop a step */ .v5-prev { display: grid; gap: 10px; padding: 14px 14px 12px; border-radius: 16px; background: var(--card-2); border: 1px solid var(--card-edge); } .v5-prev:empty { display: none; } .v5-prev-h { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; } .v5-prev-h .label { font: 500 12.5px/1.2 var(--sans); color: var(--muted); } .v5-prev-h b { font: 600 17px/1.2 var(--sans); color: var(--ink); font-variant-numeric: tabular-nums; } .v5-lad { position: relative; margin: 12px 16px 0; } .v5-lad-track { position: relative; height: 8px; border-radius: 4px; background: color-mix(in srgb, var(--ink) 9%, transparent); } .v5-lad-track i { position: absolute; top: 0; bottom: 0; box-sizing: border-box; border-radius: 4px; } .v5-lad-fill { left: 0; background: var(--green); } .v5-lad-add { box-shadow: inset 0 0 0 1.5px var(--green); background: repeating-linear-gradient(135deg, transparent 0 5px, color-mix(in srgb, var(--green) 30%, transparent) 5px 9px); } .v5-lad-reach { border: 1.5px dashed color-mix(in srgb, var(--green) 45%, transparent); } .v5-stops { position: relative; height: 40px; margin: 0; padding: 0; list-style: none; } .v5-stop { position: absolute; top: -10px; left: calc(var(--x) * 1%); translate: -50% 0; display: grid; justify-items: center; gap: 2px; } .v5-stop::before { content: ""; width: 12px; height: 12px; box-sizing: border-box; border-radius: 50%; background: var(--card); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--ink) 25%, transparent); } .v5-stop.after { margin-top: 0; font-size: inherit; } /* a step past the line: not the landing's global .after (margin, 15px) */ .v5-stop.done::before { background: var(--green); box-shadow: 0 0 0 3px var(--card-2); } .v5-stop.after::before { box-shadow: inset 0 0 0 3px var(--green), 0 0 0 3px var(--glow); } .v5-stop.reach::before { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--green) 60%, transparent); } .v5-stop.l { translate: -6px 0; justify-items: start; } .v5-stop.r { translate: calc(-100% + 6px) 0; justify-items: end; } .v5-stop-b { position: relative; min-height: 36px; margin: 0 -6px; padding: 4px 6px; border: 0; border-radius: 6px; background: none; color: var(--muted); font: 500 12.5px/1.2 var(--sans); font-variant-numeric: tabular-nums; white-space: nowrap; cursor: help; text-decoration: underline dotted color-mix(in srgb, var(--ink) 35%, transparent); text-underline-offset: 3px; } .v5-stop.done .v5-stop-b, .v5-stop.after .v5-stop-b { color: var(--ink); } .v5-stop.later .v5-stop-b { color: var(--faint); } .v5-stop-b:hover, .v5-stop-b[aria-expanded="true"] { color: var(--green); text-decoration-color: var(--green); } .v5-stop-b:focus-visible { outline: 2px solid var(--green); outline-offset: 0; } .v5-line, .v5-more, .v5-next { margin: 0; font: 400 13.5px/1.45 var(--sans); color: var(--ink-2); } .v5-line { white-space: pre-line; color: var(--ink); } .v5-more { color: var(--green); font-weight: 500; } .v5-next .sub { display: block; margin-top: 2px; font-size: 13px; color: var(--muted); } /* the two plain lines (fees, the burn), How it works, Add fees back, the button */ .v5-two { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; font: 400 13.5px/1.45 var(--sans); color: var(--ink-2); } .v5-two li { position: relative; padding-left: 18px; } .v5-two li::before { content: ""; position: absolute; left: 3px; top: .5em; width: 7px; height: 7px; border-radius: 50%; background: var(--green); } .v5-two li + li::before { background: var(--red); } .v5-two b, .v5-risks b { color: var(--ink); font-weight: 600; } .v5-how summary, .v5-hist summary { padding: 6px 0; color: var(--ink); font: 600 13.5px/1.3 var(--sans); cursor: pointer; } .v5-how summary:focus-visible, .v5-hist summary:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; border-radius: 4px; } .v5-risks { margin: 6px 0 0; padding-left: 20px; font: 400 13.5px/1.45 var(--sans); color: var(--ink-2); } .v5-risks li { margin: 4px 0; } .v5-note { margin: 6px 0 0; font-size: 12.5px; } .v5-aa { display: grid; gap: 2px; } .v5-aa .sub { margin: 0 0 0 46px; font-size: 13px; } .v5-aa .sub[hidden] { display: none; } .v5-sw { display: inline-flex; align-items: center; justify-self: start; gap: 10px; min-height: 36px; margin: 0; padding: 4px 0; border: 0; border-radius: 6px; background: none; color: var(--ink); font: 500 14px/1.3 var(--sans); text-align: left; cursor: pointer; } .v5-sw-k { position: relative; flex: none; width: 36px; height: 20px; border-radius: 999px; background: color-mix(in srgb, var(--ink) 20%, transparent); } .v5-sw-k::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--card); box-shadow: 0 1px 3px var(--shade); } .v5-sw[aria-checked="true"] .v5-sw-k { background: var(--green); } .v5-sw[aria-checked="true"] .v5-sw-k::after { left: 18px; } .v5-sw:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; } .v5-cta { display: grid; } .v5-main .v5-go { width: 100%; min-height: 48px; border-radius: 14px; font-size: 15.5px; } .v5-blocked { margin: 0; padding: 12px 14px; border-radius: 12px; background: var(--brass-soft); color: var(--ink); font: 500 14px/1.45 var(--sans); } /* the review and the Leave and Close sheets */ .v5-sheet { display: grid; gap: 10px; margin: 0; padding: 16px; border-radius: 16px; background: var(--card-2); border: 1px solid var(--field-edge); } .v5-sheet h4 { margin: 0; font: 600 16px/1.3 var(--sans); color: var(--ink); } .v5-sheet p { margin: 0; font: 400 14px/1.5 var(--sans); color: var(--ink-2); } .v5-sheet p b { color: var(--ink); } .v5-sheet .v5-risks { margin: 0; } .v5-rv { display: grid; margin: 0; border-radius: 12px; background: var(--card); border: 1px solid var(--card-edge); } .v5-rv > div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; padding: 10px 12px; } .v5-rv > div + div { border-top: 1px solid var(--card-edge); } .v5-rv dt { font: 500 13px/1.3 var(--sans); color: var(--muted); } .v5-rv dd { margin: 0; font: 600 14px/1.3 var(--sans); color: var(--ink); font-variant-numeric: tabular-nums; text-align: right; overflow-wrap: anywhere; } .v5-sheet-act { display: flex; flex-wrap: wrap; gap: 8px; } .v5-takeas { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; } .v5-takeas .v5-seg button { padding: 8px 14px; font-size: 13.5px; } /* the Close side */ .v5-close { display: grid; gap: 12px; } .v5-empty { margin: 0; } .v5-close > .v5-note { margin: 0; font-size: 14px; color: var(--ink-2); } .v5-opt { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 12px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--card-edge); } .v5-opt > div { display: grid; gap: 4px; flex: 1 1 220px; min-width: 0; } .v5-opt p { margin: 0; } /* figures in a row: the Close side's, a position's */ .v5-figs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; border-radius: 14px; background: var(--card-2); border: 1px solid var(--card-edge); } .v5-figs2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .v5-figs > div { display: grid; align-content: start; gap: 4px; min-width: 0; padding: 12px 14px; } .v5-figs > div + div { border-left: 1px solid var(--card-edge); } .v5-figs dt { font: 500 12.5px/1.25 var(--sans); color: var(--muted); } .v5-figs dd { display: grid; gap: 3px; margin: 0; font: 600 16px/1.2 var(--sans); color: var(--ink); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; } .v5-figs dd .sub { font: 400 12.5px/1.35 var(--sans); color: var(--muted); } .v5-pos .v5-figs > div { padding: 10px 12px; } .v5-fig { overflow-wrap: anywhere; } /* Your backing */ .v5-mineCol { display: grid; align-content: start; gap: 12px; } .v5-mineCol[hidden] { display: none; } .v5-mine-h { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; min-height: 40px; } .v5-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 6px 6px 6px 14px; border-radius: 14px; background: var(--glow); } .v5-bar > div { display: grid; gap: 2px; } .v5-bar .label { font: 500 12px/1.2 var(--sans); color: var(--muted); } .v5-bar b { font: 600 16px/1.2 var(--sans); color: var(--ink); font-variant-numeric: tabular-nums; } .v5-pos { display: grid; gap: 12px; min-width: 0; padding: 14px; border-radius: 16px; background: var(--card); border: 1px solid var(--card-edge); } .v5-pos-h { display: flex; align-items: center; gap: 12px; } .v5-pos-who { display: grid; flex: 1 1 auto; gap: 4px; min-width: 0; } .v5-pos-who .ap-link, .v5-ag-who .ap-link { overflow-wrap: anywhere; } .v5-chips-row { display: flex; flex-wrap: wrap; gap: 4px; } .v5-acts { display: flex; flex-wrap: wrap; gap: 8px; } .v5-acts:empty { display: none; } .v5-sws { display: grid; gap: 6px; padding-top: 10px; border-top: 1px solid var(--card-edge); } .v5-sws .sub { margin: 0 0 0 46px; font-size: 13px; } .v5-back-amt { display: grid; justify-items: end; gap: 2px; text-align: right; } .v5-back-amt b { font: 600 15px/1.2 var(--sans); font-variant-numeric: tabular-nums; } .v5-hist-l { margin: 6px 0 0; } .v5-hist-l li { font-size: 14px; overflow-wrap: anywhere; } .v5-how-card { padding: 16px; border-radius: 16px; background: var(--card-2); border: 1px solid var(--card-edge); } .v5-how-card ol { display: grid; gap: 6px; margin: 8px 0 0; padding-left: 20px; font: 400 13.5px/1.45 var(--sans); color: var(--ink-2); } /* Agents that repay */ .v5-ex { display: grid; gap: 12px; } .v5-ex-h { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; } .v5-ex .st-p { margin: 0; } .v5-ex-ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } #v5 #v5-q { flex: 1 1 220px; min-width: 0; max-width: 340px; padding: 10px 14px; border-radius: 12px; font-size: 15px; } .v5-sorts { display: flex; flex-wrap: wrap; gap: 8px; } .v5-ex-state { display: grid; gap: 8px; } .v5-ex-state:empty { display: none; } .v5-ex-state > .btn { justify-self: start; } .v5-ex-fb { margin: 0; } .v5-ex-list { display: grid; margin: 0; padding: 0; list-style: none; border-radius: 16px; background: var(--card); border: 1px solid var(--card-edge); } .v5-ex-list:empty { display: none; } .v5-ag { display: grid; grid-template-columns: 34px minmax(0, 1.6fr) 96px minmax(0, 1fr) 156px; align-items: center; gap: 10px 14px; padding: 12px 14px; } .v5-ag + .v5-ag { border-top: 1px solid var(--card-edge); } .v5-ag-meta { display: contents; } .v5-ag-who { display: grid; gap: 3px; min-width: 0; } .v5-ag-rec { font: 400 13px/1.35 var(--sans); color: var(--muted); overflow-wrap: anywhere; } .v5-ag-line { display: grid; gap: 2px; } .v5-ag-line .label { font: 500 11.5px/1.2 var(--sans); color: var(--muted); } .v5-ag-line b { font: 600 15px/1.2 var(--sans); color: var(--ink); font-variant-numeric: tabular-nums; } .v5-ag-chips { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; } .v5-ag-act { justify-self: end; } .v5-ex-none { padding: 16px; color: var(--muted); font-size: 14px; } .v5-ex-more { display: grid; justify-items: center; } .v5-ex-more:empty { display: none; } /* what an action says: kept in view at the bottom while the page scrolls */ .v5-toast { position: sticky; bottom: 16px; z-index: 30; width: 100%; max-width: 560px; box-sizing: border-box; margin: 0 auto; padding: 12px 16px; border-radius: 14px; background: var(--card); border: 1px solid var(--card-edge); box-shadow: 0 14px 34px -14px var(--shade), 0 2px 8px var(--shade); } .v5-toast:empty { display: none; } @media (prefers-reduced-motion: no-preference) { .v5-seg button, .v5-chips button, .v5-fchip, .v5-fill, .v5-pick-b, .v5-pick-o, .v5-stop-b { transition: background-color .15s, color .15s, border-color .15s, box-shadow .15s; } .v5-sw-k, .v5-sw-k::after { transition: background-color .15s, left .15s var(--ease); } } @media (max-width: 980px) { .v5-grid { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 640px) { .v5 { gap: 16px; } .v5-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .v5-tile { min-height: 0; padding: 12px 14px; } .v5-tile b { font-size: 20px; } .v5-main { padding: 16px; border-radius: 18px; } .v5-pick-b, .v5-pick-o { grid-template-columns: 34px minmax(0, 1fr); } button.v5-pick-b { grid-template-columns: 34px minmax(0, 1fr) 14px; } .v5-pick-c { grid-column: 2; grid-row: 2; justify-content: flex-start; } button.v5-pick-b .v5-chev { grid-column: 3; grid-row: 1; } #v5 #v5-amount { font-size: 26px; } .v5-open { grid-template-columns: minmax(0, 1fr); } .v5-lad { margin: 12px 8px 0; } .v5-prev { padding: 12px; } .v5-main .v5-go { min-height: 52px; } .v5-figs, .v5-figs2 { grid-template-columns: minmax(0, 1fr); } .v5-figs > div { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; padding: 10px 14px; } .v5-figs > div + div { border-left: 0; border-top: 1px solid var(--card-edge); } .v5-figs dd { justify-items: end; text-align: right; } .v5-how-card { display: none; } .v5-ag { grid-template-columns: 34px minmax(0, 1fr) minmax(0, max-content); grid-template-areas: "av who who" ". meta act"; gap: 8px 12px; } .v5-ag > .v5-av { grid-area: av; } .v5-ag-who { grid-area: who; } .v5-ag-meta { grid-area: meta; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; min-width: 0; } .v5-ag-line { display: flex; align-items: baseline; gap: 6px; } .v5-ag-act { grid-area: act; align-self: center; } .v5-ag-act .btn { min-height: 44px; } .v5-toast { bottom: calc(76px + env(safe-area-inset-bottom)); } } /* a backing row's own line, under its buttons (account-v5.js rowSlot, journey audit B1-11) */ .v5-row-s { padding: 0; } .v5-row-s:empty { display: none; } /* [/v5] */ /* [hire] the Hire page (hire.html, hire.js): only with SITE_HIRE=on (scripts/build-site.mjs) */ .hire .panel { margin-top: 22px; } .hire .panel > *:not(header) { margin-top: 12px; } .hire .hr-figs { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px 24px; margin: 0; } .hire .hr-figs dt, .hire .hr-receipt dt { font: 500 12px/1.3 var(--sans); color: var(--ink-3, #8a8a8a); text-transform: uppercase; letter-spacing: .04em; } .hire .hr-figs dd, .hire .hr-receipt dd { margin: 3px 0 0; font: 500 16px/1.35 var(--sans); color: var(--ink); } .hire .hr-table-wrap { overflow-x: auto; } .hire .hr-table { width: 100%; border-collapse: collapse; font: 400 14px/1.4 var(--sans); } .hire .hr-table th, .hire .hr-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line, rgba(127,127,127,.25)); white-space: nowrap; } .hire .hr-table th { font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; } .hire #hr-form { display: grid; gap: 14px; max-width: 720px; } .hire .hr-fld { display: grid; gap: 6px; font: 500 14px/1.3 var(--sans); } .hire .hr-fld input, .hire .hr-fld textarea { font: 400 15px/1.4 var(--sans); padding: 9px 11px; border-radius: 8px; border: 1px solid var(--line, rgba(127,127,127,.35)); background: transparent; color: var(--ink); } .hire .hr-fld input { max-width: 120px; } .hire .hr-pay { border: 0; padding: 0; margin: 0; display: grid; gap: 8px; } .hire .hr-pay legend { font: 500 14px/1.3 var(--sans); margin-bottom: 6px; } .hire .hr-pay label { display: flex; gap: 8px; align-items: baseline; font: 400 15px/1.35 var(--sans); } .hire .hr-act { display: flex; gap: 10px; flex-wrap: wrap; } .hire .hr-price { font: 500 15px/1.4 var(--sans); } .hire .hr-result { white-space: pre-wrap; font: 400 15px/1.5 var(--serif, Georgia, serif); max-height: 420px; overflow: auto; } .hire .hr-receipt { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px 22px; margin: 0; } /* [/hire] */ /* [builders] Built on Priors (builders.html, builders.js): only with SITE_BUILDERS=on (scripts/build-site.mjs). The protocol page's parts (the § sections, doors, steps, defs) with a few of its own: the hero's stack of layers (the pool at the bottom, what is built on the record above it), the open builds' cards and the command rows. */ .builders.app-main { gap: 0; } .builders section.sec:first-of-type { border-top: 1px solid var(--ink); } .builders .bo-hero { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 56px; align-items: center; padding: 22px 0 64px; } .builders .bo-hero p { max-width: 34em; } .builders .bo-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; } /* the stack: each layer reads the one below it; the top one, still to build, drawn dashed. The labels that tell a reader what is not live yet ("To build", "Imagine") are small text, so they take --brass-ink (4.5:1 or more on the paper by day, brass itself by night); brass stays for the large build letters. */ .builders .bo-stack { margin: 0; display: grid; gap: 8px; } .builders .bo-layer { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 18px; align-items: baseline; padding: 16px 20px 17px; border: 1px solid var(--rule); background: var(--paper); } .builders .bo-layer .k { font: 500 13px/1.3 var(--sans); color: var(--muted); } .builders .bo-layer b { display: block; font: 400 21px/1.2 var(--serif); letter-spacing: -.005em; color: var(--ink); } .builders .bo-layer p { margin-top: 5px; font: 400 14px/1.5 var(--sans); color: var(--ink-2); } .builders .bo-layer.next { border: 1px dashed var(--field-edge); background: transparent; } .builders .bo-layer.next .k { color: var(--brass-ink); } .builders .bo-layer.next b, .builders .bo-layer.next p { color: var(--muted); } .builders .bo-layer.live { border-color: var(--green); background: var(--green-soft); } .builders .bo-layer.live .k { color: var(--green); } .builders .bo-layer.record { border-color: var(--ink); background: var(--ink); } .builders .bo-layer.record .k, .builders .bo-layer.record p { color: var(--paper-3); } .builders .bo-layer.record b { color: var(--paper); } .builders .bo-layer.pool { background: var(--paper-2); } .builders .bo-layer.pool .k { color: var(--ink-2); } /* § 01: the line people repeat */ .builders .bo-quote { margin: 0 0 44px; padding: 2px 0 2px 26px; border-left: 2px solid var(--green); } .builders .bo-quote p { font: italic 400 clamp(26px, 3vw, 38px)/1.25 var(--serif); letter-spacing: -.01em; color: var(--ink); max-width: 22em; } /* § 02 and § 03: the doors two by two, a rule between the rows */ .builders .bo-doors > .door { display: flex; flex-direction: column; align-items: flex-start; } .builders .bo-doors > .door:nth-child(odd) { padding-left: 0; } .builders .bo-doors > .door:nth-child(2n) { padding-left: 28px; border-right: 0; } .builders .bo-doors > .door:nth-child(n+3) { border-top: 1px solid var(--rule); } .builders .bo-doors .door b { font-size: 26px; } .builders .bo-doors .door:hover b { color: var(--ink); } .builders .bo-doors .door p code { font-size: 13px; } .builders .bo-doors .door .tag { margin-top: auto; padding-top: 0; } .builders .bo-how { display: block; margin: 16px 0 18px; padding: 8px 11px; background: var(--paper-2); font: 12.5px/1.5 var(--mono); color: var(--ink-2); overflow-wrap: anywhere; } .builders .bo-host { margin: -4px 0 10px; font-size: 14px; color: var(--muted); } .builders .bo-foot { margin-top: auto; padding-top: 18px; display: flex; align-items: baseline; gap: 18px; } .builders .bo-foot .tag { margin-top: 0; } .builders .bo-foot .link { font-size: 14px; } .builders .bo-next { margin-top: 48px; } .builders .bo-next > header { align-items: baseline; } .builders .bo-next > header span:first-child { color: var(--brass-ink); } .builders .bo-next ul { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } .builders .bo-next li { padding: 18px 28px 18px 0; border-bottom: 1px solid var(--rule-2); font: 400 18px/1.5 var(--serif); color: var(--ink-2); } .builders .bo-next li:nth-child(2n) { padding: 18px 0 18px 28px; border-left: 1px solid var(--rule-2); } .builders .bo-next li em { color: var(--brass-ink); } .builders .bo-sub { margin: 52px 0 0; font: 400 24px/1.2 var(--serif); letter-spacing: -.01em; } .builders .bo-sub + .box { margin-top: 14px; } .builders .bo-list .def .d a { color: var(--green); } .builders .bo-list code { font-size: 13px; overflow-wrap: anywhere; } /* § 04: the open builds */ .builders .bo-builds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--ink); } .builders .bo-build { display: flex; flex-direction: column; gap: 10px; padding: 26px 32px 30px 0; border-bottom: 1px solid var(--rule); } .builders .bo-build:nth-child(2n) { padding: 26px 0 30px 32px; border-left: 1px solid var(--rule); } .builders .bo-build header { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 4px; } .builders .bo-build .n { font: italic 400 26px/1 var(--serif); color: var(--brass); } .builders .bo-reward { font: 400 26px/1 var(--serif); color: var(--green); white-space: nowrap; font-variant-numeric: lining-nums tabular-nums; } .builders .bo-build h3 { font: 400 26px/1.15 var(--serif); letter-spacing: -.01em; } .builders .bo-build p { color: var(--ink-2); font-size: 15px; max-width: 36em; } .builders .bo-build code { font-size: 13px; } .builders .bo-done { margin-top: 6px; font: 500 13px/1.3 var(--sans); color: var(--muted); } .builders .bo-build ul { margin: 0; padding: 0; list-style: none; font-size: 14.5px; color: var(--ink-2); } .builders .bo-build li { position: relative; padding: 8px 0 8px 24px; border-top: 1px dotted var(--rule); } .builders .bo-build li::before { content: ""; position: absolute; left: 3px; top: 14px; width: 10px; height: 5px; border-left: 1.5px solid var(--green); border-bottom: 1.5px solid var(--green); transform: rotate(-45deg); } .builders .bo-claim, .builders .bo-facts { margin-top: 36px; border-top: 1px solid var(--ink); } .builders .bo-claim > div, .builders .bo-facts > div { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 20px; align-items: baseline; padding: 16px 0; border-bottom: 1px solid var(--rule); } .builders .bo-claim span, .builders .bo-facts span { font-size: 14px; color: var(--muted); } .builders .bo-claim p, .builders .bo-facts p { font: 400 18px/1.5 var(--serif); color: var(--ink); } .builders .bo-claim a, .builders .bo-facts a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; } .builders .bo-facts code { font-size: 14px; } /* § 05: commands to copy */ .builders .bo-cmds { border-top: 1px solid var(--ink); } .builders .bo-cmd { display: grid; grid-template-columns: minmax(0, 20em) minmax(0, 1fr) auto; gap: 20px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--rule); } .builders .bo-cmd .k { font-size: 14px; color: var(--muted); } .builders .bo-cmd code { min-width: 0; padding: 9px 12px; background: var(--paper-2); font: 13.5px/1.5 var(--mono); color: var(--ink); overflow-wrap: anywhere; } .builders .bo-copy { min-width: 84px; } .builders .bo-cap { margin-top: 28px; font: 500 13px/1.3 var(--sans); color: var(--muted); } .builders .bo-code { margin-top: 10px; font-size: 12.5px; } .builders .bo-facts p .bo-copy { margin-left: 10px; vertical-align: middle; } .builders .bo-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 32px; } .builders section.sec:last-of-type { padding-bottom: 16px; } @media (max-width: 1000px) { .builders .bo-hero { grid-template-columns: minmax(0, 1fr); gap: 36px; padding-bottom: 48px; } .builders .bo-doors > .door, .builders .bo-doors > .door:nth-child(2n), .builders .bo-doors > .door:nth-child(n+3) { padding-left: 0; border-top: 0; } .builders .bo-next ul, .builders .bo-builds { grid-template-columns: minmax(0, 1fr); } .builders .bo-next li, .builders .bo-next li:nth-child(2n), .builders .bo-build, .builders .bo-build:nth-child(2n) { padding-left: 0; padding-right: 0; border-left: 0; } } @media (max-width: 720px) { .builders section.sec { padding-block: 52px; } .builders .bo-cmd { grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; } .builders .bo-cmd .k { grid-column: 1 / -1; } .builders .bo-claim > div, .builders .bo-facts > div { grid-template-columns: minmax(0, 1fr); gap: 4px; } .builders .bo-claim p, .builders .bo-facts p { font-size: 17px; } .builders .bo-code { white-space: pre-wrap; overflow-wrap: anywhere; } } @media (max-width: 520px) { .builders .bo-layer { grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 14px 16px 15px; } .builders .bo-quote { padding-left: 18px; } .builders .bo-build h3, .builders .bo-doors .door b { font-size: 23px; } } /* [/builders] */ /* Go mode polish (2026-10-07): one style for every small figure (tiles, cards, activity), the serif kept for the hero number; the top bar's pool figures hidden on Home, where its pool card shows them */ .acct .sk-figs b { font: 600 18px/1.2 var(--sans); letter-spacing: -.01em; font-variant-numeric: lining-nums tabular-nums; } .acct .ac-ev-amt { font: 600 14.5px/1 var(--sans); } @media (max-width: 700px) { .acct .sk-figs b { font-size: 16px; } } html[data-ga-home] .ga-stats { display: none; } html[data-ga-home] .ga-cash, html[data-ga-home] .ga-add { display: none; } /* Home shows the balance and Add USDG itself */ /* Seats: its tiles and fee figures in the same figure style as the rest of Go mode (the locked-$PRIORS hero keeps the serif, like Home's "Available to borrow") */ .acct .se-figs b { font: 600 18px/1.2 var(--sans); letter-spacing: -.01em; font-variant-numeric: lining-nums tabular-nums; } .acct .se-r-fee b { font: 600 14.5px/1.1 var(--sans); } .acct .se-c-fee b { font: 600 18px/1.1 var(--sans); } .acct .pt-kv b { font: 600 16px/1.2 var(--sans); font-variant-numeric: lining-nums tabular-nums; } /* phones: an odd last tile (Home's shortcuts, the figures) takes the whole row instead of sitting alone in half of it */ @media (max-width: 700px) { #ga-doors > .ga-door.ga-door:last-child:nth-child(odd):not(:only-child), .acct .ac-figs > div:last-child:nth-child(odd) { grid-column: 1 / -1; } } /* [xlink] an agent's X link and where it runs (account-xlink.js: the agent panel's chip and its Link its X account sheet; account-runtime.js: the x402 tab's Where it runs): only with SITE_XLINK=on (scripts/build-site.mjs) */ .xl-mark { width: 13px; height: 13px; flex: none; } .xchip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px 5px 10px; border: 1px solid var(--card-edge); border-radius: 999px; background: var(--card); color: var(--ink); font: 500 12.5px/1 var(--sans); text-decoration: none; } .xchip:hover, .xchip:focus-visible { border-color: var(--ink-2); } .xchip .xchip-h { font-weight: 600; } .xchip .xchip-l { color: var(--muted); } .xchip .xchip-l::before { content: "·"; margin-right: 6px; } #ap-xl:empty { display: none; } .xl-line { margin: 12px 0 0; font: 400 13.5px/1.5 var(--sans); color: var(--ink-2); overflow-wrap: anywhere; } #ap-xls:not([hidden]) { margin: 12px 0 4px; } .xl-sheet { display: grid; gap: 14px; padding: 18px 18px 16px; border: 1px solid var(--card-edge); border-radius: 18px; background: var(--card-2); } .xl-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .xl-head h3 { display: inline-flex; align-items: center; gap: 10px; margin: 0; font: 500 22px/1.15 var(--serif); } .xl-head h3:focus { outline: none; } .xl-head .xl-mark { width: 17px; height: 17px; } .xl-x { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--card-edge); border-radius: 999px; background: var(--card); color: var(--ink-2); font: 400 19px/1 var(--sans); cursor: pointer; } .xl-x:hover { color: var(--ink); border-color: var(--muted); } .xl-lede { margin: 0; font: 400 14px/1.5 var(--sans); color: var(--ink-2); } #xl-nowbox:empty { display: none; } .xl-now { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding: 10px 12px; border-radius: 12px; background: var(--card); border: 1px solid var(--card-edge); font: 400 13.5px/1.4 var(--sans); } .xl-steps { display: grid; gap: 16px; margin: 0; padding: 0 0 0 20px; font: 400 14px/1.45 var(--sans); color: var(--ink-2); } .xl-steps > li { min-width: 0; padding-left: 2px; } .xl-steps > li::marker { font: 600 13px var(--sans); color: var(--muted); } .xl-steps .sub { display: block; margin-top: 6px; font-size: 12.5px; } .xl-k { display: block; margin-bottom: 7px; font: 600 14px/1.3 var(--sans); color: var(--ink); } .xl-at { display: flex; align-items: center; max-width: 320px; border: 1px solid var(--card-edge); border-radius: 14px; background: var(--field); } .xl-at:focus-within { border-color: var(--green); box-shadow: 0 0 0 3px var(--glow); } .xl-at > span { padding: 0 2px 0 14px; color: var(--muted); font: 500 16px var(--sans); } .acct .xl-at input:not([type="radio"]):not([type="checkbox"]) { flex: 1; min-width: 0; border: 0; box-shadow: none; background: transparent; padding-left: 4px; } .xl-post { margin: 0 0 10px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--card-edge); background: var(--card); font: 400 14.5px/1.5 var(--sans); color: var(--ink); overflow-wrap: anywhere; } .xl-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; } .xl-row > input { flex: 1 1 220px; min-width: 0; } .acct .xl-postx { gap: 8px; } .acct .xl-postx .xl-mark { width: 12px; height: 12px; } .xl-sheet .wstat { padding: 8px 0 0; } .xl-note { margin: 0; font-size: 12.5px; line-height: 1.45; } .xl-note + .xl-note { margin-top: -8px; } /* the link where the owner looks (account-xlink.js): the chip after an own agent's name on its card and under Home's tree, and Link its X account beside View record (the card, the Launchpad's Grow its record) or Link X under the tree */ .xl-spot { display: inline-flex; min-width: 0; max-width: 100%; } .xl-spot .xchip { min-width: 0; max-width: 100%; } .xl-spot .xchip-h { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .acct .xl-open { display: inline-flex; align-items: center; gap: 8px; } .acct .xl-open .xl-mark { width: 12px; height: 12px; } .acct .xl-hero-link { gap: 6px; font: 500 13px/1.2 var(--sans); } /* under the tree the column is narrow (176 px, less on a phone): the handle whole, "linked" left to the chip's label */ .acct .hm-pic > .xl-spot .xchip { gap: 5px; font-size: 12px; padding: 4px 9px 4px 8px; } .acct .hm-pic > .xl-spot .xchip-l { display: none; } @media (max-width: 700px) { .acct .hm-pic > .xl-spot .xchip { font-size: 11px; padding: 3px 7px; } .acct .hm-pic > .xl-spot .xl-mark { width: 11px; height: 11px; } } .ac-runlink { margin-top: 8px; } @media (max-width: 700px) { .xl-sheet { padding: 16px 14px 14px; } .xl-head h3 { font-size: 20px; } } /* [/xlink] */ /* the sidebar in groups (goapp.js, SITE_NAV2=on): each group's name over its tabs, set apart from the tabs above */ .ga-group { display: flex; flex-direction: column; gap: 2px; margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--card-edge); } .ga-group-h { padding: 0 12px 6px; font: 600 12px/1.2 var(--sans); letter-spacing: .02em; color: var(--muted); }