/* The site's shared look (Oct 23, 2026, audit A-13): every colour as a variable, the fonts, the page basics, the menu bar,
   the wallet pill and its menu, Edit profile and the cookie question, in one place. Pages add their own rules after it.
   Dark mode (Oct 23, 2026, canvas row "Dark mode (Oct 23)", board V2DarkTokens) redefines them under [data-theme="dark"],
   which the first script in every page's head sets before anything draws (site.js keeps the switch). The look itself: the
   trading desk (Oct 20, 2026, canvas "Design" page, F2), grape only for actions and links, green and orange only for up and down. */
@font-face { font-family: 'IBM Plex Sans'; font-weight: 400 600; font-display: swap; src: url(/fonts/ibm-plex-sans.woff2) format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-weight: 500; font-display: swap; src: url(/fonts/ibm-plex-mono.woff2) format('woff2'); }
:root {
  color-scheme: light;
  --grape:#4535A8; --grape-d:#2E2380; --soft:#6E64B8; --bg:#ECECF0; --card:#FFFFFF; --ink:#1E1F24; --text2:#5D5F6B; --body2:#41434E;
  --hair:#E3E3EA; --chip:#F3F3F6; --up:#1E7A45; --up-soft:#E3F2E8; --up-d:#145A32; --down:#B8432B; --down-soft:#F8E9E5; --down-d:#8E3220; --blue:#3F6FD8;
  --yes:var(--up); --no:var(--down);
  --link:#4535A8; --link-d:#2E2380; /* links, the menu underline, active tabs, the focus ring: grape in light, a lighter grape in dark */
  --on-color:#FFFFFF; /* text and marks on grape and blue */
  --tag-ink:#FFFFFF; /* text, ticks and numbers on green and orange (the chart's price tags): white in light, dark ink in dark (white on the dark green was 2.3:1; Oct 23, 2026) */
  --shade:18, 18, 24; /* shadows and the dim behind sheets: rgba(var(--shade), alpha) */
  --me:#EEEBFA; --me-line:#D9D3F3; --me-hover:#E6E2F7; --tap:#EEECF8; /* grape tints: your own row, a row being opened */
  /* --faint: the $0 before you type, and every line that must be seen (the i ring, break even and settlement lines, a typing
     box's edge), 3:1 or more on a card and on a grey box; dividers stay --hair (Oct 23, 2026, canvas row "Colour refinements") */
  --grid:#EFEFF3; --faint:#878995; --ring:var(--faint); --grip:#D3D3DB; --pic:#F1F0F7; --wc:#3B99FC;
  --warn:#7A5410; /* amber: Predict's last hour timer (Oct 23, 2026) */
  --sans:"IBM Plex Sans", system-ui, -apple-system, sans-serif;
  --mono:"IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --c6:polygon(6px 0, calc(100% - 6px) 0, 100% 6px, 100% calc(100% - 6px), calc(100% - 6px) 100%, 6px 100%, 0 calc(100% - 6px), 0 6px);
  --c4:polygon(4px 0, calc(100% - 4px) 0, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 0 calc(100% - 4px), 0 4px);
  --c10:polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px), 0 10px);
  --c14t:polygon(14px 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%, 0 14px); /* sheets from the bottom: top corners only */
}
/* Dark (Oct 23, 2026, board V2DarkTokens; every text pair 4.5:1 or more, lines and the i ring 3:1): a cool near black page,
   cards one step lighter, a soft white for text; grape stays for buttons, links take a lighter grape, up and down are lifted,
   green a step lighter and orange a step deeper so colour blind eyes tell them apart (Oct 23, 2026: ΔE 4.8 to 8.0 for deuteranopia) */
:root[data-theme="dark"] {
  color-scheme: dark; background: var(--bg); /* the page behind the page: overscroll and anything below the body stay dark */
  --grape:#5546C2; --grape-d:#6656D6; --soft:#4A4380; --bg:#111216; --card:#1B1C22; --ink:#E6E6EC; --text2:#9799A6; --body2:#C2C3CC;
  --hair:#2E3039; --chip:#25262E; --up:#5FC68B; --up-soft:#163222; --up-d:#7FDCA6; --down:#EC724C; --down-soft:#3A2019; --down-d:#F7A68C; --blue:#6B93F2;
  --link:#A99EF2; --link-d:#C4BCF7; --tag-ink:#111216;
  --shade:0, 0, 0;
  --me:#2B2745; --me-line:#3D3766; --me-hover:#332E52; --tap:#2A2740;
  --grid:#24252C; --faint:#767884; --grip:#3A3C46; --pic:#2A2B33;
  --warn:#E8B657;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
html { scrollbar-gutter: stable; } /* a scrollbar coming or going doesn't move the page sideways (Oct 24, 2026, Lighthouse: the leaderboard's 0.53 layout shift on desktop) */
body { min-height: 100vh; background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 15px; line-height: 1.5; font-feature-settings: "tnum" 1; padding-bottom: 64px; }
a { color: var(--link); font-weight: 500; } :where(a):hover { color: var(--link-d); } /* :where: a page's own link colours win on hover too */
button:focus-visible, input:focus-visible, a:focus-visible, summary:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
/* Cut corners clip a ring drawn outside them, so on those buttons it goes 4 px inside: white on grape, grape on grey (Oct 23, 2026) */
.wconnect:focus-visible, .ysave:focus-visible, .lbtn:focus-visible { outline-color: var(--on-color); outline-offset: -4px; }
.tbtn:focus-visible, .wpill:focus-visible { outline-offset: -4px; }
.hidden { display: none !important; }
.sym { white-space: nowrap; }
.gain { color: var(--up); } .loss { color: var(--down); }
/* Cards: the corners are cut by the background, not clip-path, so tooltips inside can still overflow the card */
.card { --cut: 7px; background:
    linear-gradient(135deg, transparent var(--cut), var(--card) 0) top left, linear-gradient(225deg, transparent var(--cut), var(--card) 0) top right,
    linear-gradient(315deg, transparent var(--cut), var(--card) 0) bottom right, linear-gradient(45deg, transparent var(--cut), var(--card) 0) bottom left;
  background-size: 51% 51%; background-repeat: no-repeat; }

/* Navbar: the same on every page (Predict, Positions, Leaderboard, How it works), drawn by site.js */
.top { background: var(--card); font-family: var(--sans); font-size: 15px; line-height: 1.5; }
.top-in { position: relative; max-width: 1120px; margin: 0 auto; padding: 0 24px; min-height: 60px; display: flex; align-items: center; gap: 28px; }
.mark { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; font-size: 19px; color: var(--ink); letter-spacing: -0.02em; text-decoration: none; }
.mark:hover { color: var(--ink); }
.mark img { border-radius: 4px; }
.nav { display: flex; gap: 24px; font-family: var(--mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; }
.nav a { color: var(--text2); font-weight: 500; text-decoration: none; padding: 4px 0; border-bottom: 2px solid transparent; white-space: nowrap; }
.nav a:hover { color: var(--ink); }
.nav a.on { color: var(--ink); border-bottom-color: var(--link); }
.wallet { position: relative; margin-left: auto; flex: none; }
.wconnect { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border: 0; background: var(--grape); color: var(--on-color); font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; white-space: nowrap; clip-path: var(--c6); text-decoration: none; }
.wconnect:hover, .lbtn:hover { background: var(--grape-d); color: var(--on-color); }
.wconnect svg, .lbtn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.wpill { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border: 0; background: var(--chip); box-shadow: inset 0 0 0 1px var(--hair); color: var(--ink); font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; white-space: nowrap; clip-path: var(--c6); }
.wpill .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--up); }
.wpill svg { width: 14px; height: 14px; fill: none; stroke: var(--text2); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.wmenu { position: absolute; right: 0; top: calc(100% + 8px); width: 200px; background: var(--card); box-shadow: 0 0 0 1px var(--hair), 0 12px 28px rgba(var(--shade), .12); padding: 6px; font-size: 14px; z-index: 30; }
.wmenu button { width: 100%; text-align: left; padding: 10px 12px; border: 0; background: none; font: inherit; font-weight: 500; cursor: pointer; color: var(--down); }
.wmenu button:hover { background: var(--chip); }

/* A link as a big button, with an arrow (How it works, Not found) */
.lbtn { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; padding: 12px 16px; background: var(--grape); color: var(--on-color); font-size: 14px; font-weight: 500; text-decoration: none; clip-path: var(--c6); }

/* The menu moves to a bar at the bottom on phones and tablets held upright: up to 860 px, since five pages beside the logo,
   the switch and Log in needed about 830 px (an iPad mini upright, 768 px, wrapped HOW IT WORKS and scrolled sideways; Oct 23, 2026).
   Four pages from Oct 25, 2026 (Trade went), five again with Earn the same day; the widths stay as they were.
   From 861 to 1100 px the menu sits a little tighter, and a long wallet name gives way (…) before the bar gets wider */
.dock { display: none; }
@media (max-width: 860px) {
  .nav { display: none; }
  body { padding-bottom: calc(88px + env(safe-area-inset-bottom)); }
  .dock { position: fixed; z-index: 20; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; gap: 2px; padding: 0 12px env(safe-area-inset-bottom); background: var(--card); box-shadow: 0 -1px 0 var(--hair); }
  .dock a { flex: 1; min-width: 0; max-width: 140px; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 9px 0 10px; border-top: 2px solid transparent; color: var(--text2); text-decoration: none; font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; -webkit-tap-highlight-color: transparent; }
  .dock a.on { color: var(--link); border-top-color: var(--link); }
  .dock svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: square; stroke-linejoin: miter; }
}
/* Five tabs on a 320 px phone (Oct 25, 2026, Earn): POSITIONS ran 3 px into PREDICT at .12em, so the narrowest phones space
   the letters tighter and the bar's sides less */
@media (max-width: 360px) { .dock { padding-left: 4px; padding-right: 4px; gap: 0; } .dock a { letter-spacing: .05em; } }
@media (min-width: 861px) and (max-width: 1100px) {
  .top-in { gap: 20px; } .nav { gap: 16px; letter-spacing: .08em; }
  .wallet { flex: 0 1 auto; min-width: 0; } .wpill { max-width: 100%; }
}
@media (max-width: 640px) { .top-in { padding: 0 16px; min-height: 56px; } }

/* Profiles (profile.js, Oct 22, 2026): pictures, your picture and name in the pill, the menu's top, Edit profile */
.yav { position: relative; display: inline-block; flex: none; border-radius: 50%; overflow: hidden; background: var(--pic); vertical-align: middle; }
.yimg::after { content: ''; position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(var(--shade), .08); pointer-events: none; } /* an edge for photos with a white background */
.yav > svg, .yav > img { display: block; width: 100% !important; height: 100% !important; stroke: none !important; object-fit: cover; } /* the pages style every svg in the pill as an icon */
#wPill.yhas { padding: 6px 10px 6px 6px; }
#wPill.yhas .dot { display: none; }
#wAddr { max-width: 150px; overflow: hidden; text-overflow: ellipsis; }
#wMenu.ymenu { width: 260px; }
#wMenu .yhead { position: relative; display: flex; align-items: center; gap: 12px; padding: 10px; margin-bottom: 9px; text-decoration: none; color: var(--ink); }
#wMenu .yhead:hover { background: var(--chip); }
#wMenu .yhead::after { content: ''; position: absolute; left: 4px; right: 4px; bottom: -5px; height: 1px; background: var(--hair); }
#wMenu .yhead > div { min-width: 0; }
#wMenu .yname { font-size: 15px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#wMenu .ypnl { min-height: 1.5em; font-size: 13px; color: var(--text2); }
#wMenu .ypnl b { font-weight: 600; }
#wMenu .yitem { display: flex; align-items: center; gap: 10px; }
#wMenu .yedit { color: var(--ink); }
#wMenu .yitem svg { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
#wMenu .yedit svg { stroke: var(--text2); }
.ywrap { position: fixed; inset: 0; z-index: 60; background: rgba(var(--shade), .45); display: flex; align-items: center; justify-content: center; padding: 16px; }
.ysheet { width: 380px; max-width: 100%; background: var(--card); color: var(--ink); box-shadow: 0 16px 40px rgba(var(--shade), .16); clip-path: var(--c10); }
.ysheet .yh { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--hair); font-weight: 600; }
.ysheet .yh button { width: 32px; height: 32px; display: grid; place-items: center; border: 0; background: var(--chip); color: var(--text2); cursor: pointer; }
.ysheet .yh svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.ysheet .yb { padding: 24px 22px 22px; display: flex; flex-direction: column; gap: 20px; }
.ysheet .ypic { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.ysheet .ypicbtn { position: relative; padding: 0; border: 0; background: none; cursor: pointer; }
.ysheet .ybadge { position: absolute; right: -2px; bottom: -2px; width: 32px; height: 32px; border-radius: 50%; background: var(--grape); box-shadow: 0 0 0 3px var(--card); display: grid; place-items: center; }
.ysheet .ybadge svg { width: 15px; height: 15px; fill: none; stroke: var(--on-color); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ysheet .ylink { min-height: 36px; border: 0; background: none; padding: 0 10px; font: inherit; font-size: 14px; font-weight: 500; color: var(--link); cursor: pointer; }
.ysheet .ylink.yquiet { color: var(--text2); }
.ysheet .yfield { display: flex; flex-direction: column; gap: 6px; }
.ysheet .yrow { display: flex; justify-content: space-between; align-items: baseline; }
.ysheet label { font-size: 13px; font-weight: 500; color: var(--body2); }
.ysheet .ycount { font-size: 12px; color: var(--text2); }
.ysheet input[type=text] { height: 46px; box-sizing: border-box; padding: 0 14px; border: 0; border-radius: 0; background: var(--chip); box-shadow: inset 0 0 0 1px var(--hair); font: inherit; font-size: 16px; color: var(--ink); outline: none; }
.ysheet input[type=text]:focus { background: var(--card); box-shadow: inset 0 0 0 1.5px var(--link); }
.ysheet input[type=text].ybad { background: var(--card); box-shadow: inset 0 0 0 1.5px var(--down); }
.ysheet .yhelp { margin: 0; font-size: 13px; color: var(--text2); }
.ysheet .yhelp.ybad { color: var(--down); }
.ysheet .ysave { height: 46px; display: flex; align-items: center; justify-content: center; gap: 10px; border: 0; background: var(--grape); color: var(--on-color); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; clip-path: var(--c6); }
.ysheet .ysave:hover { background: var(--grape-d); }
.ysheet .ysave:disabled { cursor: default; opacity: .85; }
.ysheet .ysave svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.ysheet .yfine { margin: -12px 0 0; font-size: 13px; color: var(--text2); text-align: center; }
.yspin { animation: yspin 1s linear infinite; } @keyframes yspin { to { transform: rotate(360deg); } }
.ysheet .yhide { display: none; }
@media (max-width: 600px) {
  .ywrap { align-items: flex-end; padding: 0; }
  .ysheet { width: 100%; clip-path: var(--c14t); }
  .ysheet .yh { border-bottom: 0; padding: 18px 12px 8px 20px; font-size: 17px; }
  .ysheet .yh button { width: 44px; height: 44px; background: none; }
  .ysheet .yb { padding: 4px 20px calc(24px + env(safe-area-inset-bottom)); }
  .ysheet .ylink { min-height: 44px; font-size: 15px; }
  .ysheet input[type=text], .ysheet .ysave { height: 50px; }
}

/* The cookie question (site.js, visitors in Europe) */
.ck { position: fixed; z-index: 30; left: 12px; right: 12px; bottom: 12px; max-width: 460px; margin: 0 auto; display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--card); color: var(--ink); box-shadow: 0 0 0 1px rgba(var(--shade), .1), 0 8px 24px rgba(var(--shade), .12); font: 14px/1.4 var(--sans); }
.ck p { margin: 0; flex: 1; color: var(--body2); }
.ck button { min-height: 44px; border: 0; padding: 8px 12px; font: inherit; font-weight: 500; cursor: pointer; white-space: nowrap; }
.ck .ck-y { padding: 8px 16px; background: var(--grape); color: var(--on-color); } .ck .ck-y:hover { background: var(--grape-d); }
.ck .ck-n { background: none; color: var(--text2); }

/* The Appearance switch (Oct 23, 2026, canvas V2DarkToggle option B): one small button beside Log in or your picture, its menu */
.tset { position: relative; margin-left: auto; flex: none; }
.tset + .wallet { margin-left: -20px; } /* 8px from the button, not the bar's 28 */
.tbtn { width: 40px; height: 40px; display: grid; place-items: center; border: 0; padding: 0; background: var(--chip); box-shadow: inset 0 0 0 1px var(--hair); color: var(--ink); cursor: pointer; clip-path: var(--c6); }
.tbtn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tmenu { position: absolute; right: 0; top: calc(100% + 8px); width: 240px; background: var(--card); box-shadow: 0 0 0 1px var(--hair), 0 12px 28px rgba(var(--shade), .12); z-index: 30; }
.tmenu p { margin: 0; padding: 12px 14px 6px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--text2); }
.tmenu button { width: 100%; min-height: 44px; display: flex; align-items: center; gap: 10px; padding: 8px 14px; border: 0; border-top: 1px solid var(--hair); background: none; font: inherit; font-size: 14px; color: var(--ink); cursor: pointer; text-align: left; }
.tmenu button:hover { background: var(--chip); }
.tmenu span { flex: 1; }
.tmenu small { display: block; font-size: 12px; color: var(--text2); }
.tmenu button svg { width: 16px; height: 16px; flex: none; fill: none; stroke: var(--link); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; visibility: hidden; }
.tmenu [aria-checked="true"] svg { visibility: visible; }
@media (max-width: 640px) {
  .top-in { gap: 12px; } .tset + .wallet { margin-left: -6px; }
  .wallet { flex: 0 1 auto; min-width: 0; } .wpill { max-width: 100%; } /* a long name gives way (…) before the bar gets wider than the phone */
  .tset { position: static; } .tmenu { right: 16px; top: calc(100% + 4px); } /* the menu under the bar's right edge, so it never leaves the screen */
}

/* Logging in (web/wallet.js, moved from the Predict page Oct 23, 2026): the wallet chooser */
.wsheet-wrap { position: fixed; inset: 0; background: rgba(var(--shade), .35); display: flex; align-items: center; justify-content: center; z-index: 50; padding: 16px; }
.wsheet { background: var(--card); width: 100%; max-width: 340px; box-shadow: 0 16px 40px rgba(var(--shade), .16); clip-path: var(--c10); }
.wsheet-h { display: flex; justify-content: space-between; align-items: center; font-weight: 500; padding: 12px 14px 12px 18px; border-bottom: 1px solid var(--hair); }
.wsheet-x { width: 32px; height: 32px; border: 0; background: var(--chip); font-size: 18px; line-height: 1; color: var(--text2); cursor: pointer; }
.wsheet-list { padding: 8px; }
.wsheet-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 10px; border: 0; border-top: 1px solid var(--hair); background: none; font: inherit; font-weight: 500; color: var(--ink); cursor: pointer; text-align: left; }
.wsheet-item:first-child { border-top: 0; }
.wsheet-item:hover { background: var(--chip); }
.wsheet-item img { width: 28px; height: 28px; border-radius: 6px; }
.wsheet-item small { color: var(--text2); font-size: 13px; font-weight: 400; }
/* Phone Log in with no wallet in the page (Oct 23, 2026, canvas V2PhoneLogin A): open Yeetr in a wallet app's own browser */
.psheet-wrap { position: fixed; inset: 0; z-index: 50; background: rgba(var(--shade), .45); display: flex; align-items: flex-end; }
.psheet { width: 100%; max-height: 100%; overflow-y: auto; background: var(--card); clip-path: var(--c14t); }
.psheet::before { content: ""; display: block; width: 40px; height: 4px; border-radius: 2px; background: var(--grip); margin: 10px auto 0; }
.psheet-h { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px 0 20px; font-size: 17px; font-weight: 600; }
.psheet-x { width: 44px; height: 44px; display: grid; place-items: center; border: 0; background: none; color: var(--text2); cursor: pointer; }
.psheet svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.psheet p { margin: 0; padding: 0 20px 12px; font-size: 14px; color: var(--body2); }
.psheet .psheet-l { padding: 14px 20px 6px; font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--text2); }
.psheet-row { width: 100%; min-height: 60px; display: flex; align-items: center; gap: 12px; padding: 8px 20px; border: 0; border-top: 1px solid var(--hair); background: var(--card); font: inherit; font-weight: 400; color: var(--ink); text-decoration: none; text-align: left; cursor: pointer; }
.psheet-row:hover { color: var(--ink); } .psheet-row.on { background: var(--tap); }
.psheet-i { width: 36px; height: 36px; flex: none; display: grid; place-items: center; padding: 6px; box-sizing: border-box; background: #FFFFFF; box-shadow: inset 0 0 0 1px var(--hair); clip-path: var(--c6); } /* white in dark mode too: an app icon */
.psheet-i img { width: 100%; height: 100%; object-fit: contain; } .psheet-i.full { padding: 0; box-shadow: none; }
.psheet-n { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; font-size: 16px; font-weight: 500; }
.psheet-n small { font-size: 13px; font-weight: 400; color: var(--text2); }
.psheet-e { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 500; color: var(--link); }
.psheet .psheet-f { padding: 12px 20px calc(34px + env(safe-area-inset-bottom)); border-top: 1px solid var(--hair); font-size: 13px; color: var(--text2); }
.psheet-copy { display: block; width: calc(100% - 40px); margin: 0 20px 12px; padding: 10px 12px; border: 1px solid var(--hair); background: var(--card); color: var(--ink); font: 14px var(--mono); }
.psheet-i svg { width: 20px; height: 20px; color: #000000; } /* the link mark on the white tile */
/* A log in that failed (U-8, Oct 23, 2026, canvas V2DeadEnds and its phone board): a note right under Log in (.top-in holds it) */
.lnote { position: absolute; z-index: 40; top: calc(100% + 8px); right: 24px; width: 360px; display: flex; gap: 12px; align-items: flex-start; padding: 14px 14px 14px 16px; background: var(--card); color: var(--ink); box-shadow: 0 0 0 1px var(--hair), 0 8px 24px rgba(var(--shade), .12); font: 14px/1.4 var(--sans); }
.lnote svg { width: 20px; height: 20px; flex: none; margin-top: 1px; fill: none; stroke: var(--down); stroke-width: 2; stroke-linecap: round; }
.lnote > div { flex: 1; min-width: 0; }
.lnote b { display: block; font-size: 14.5px; font-weight: 500; }
.lnote p { margin: 2px 0 0; font-size: 13.5px; color: var(--text2); }
.lnote .ln-try { margin-top: 8px; padding: 0; border: 0; background: none; color: var(--link); font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; }
.lnote .ln-x { width: 28px; height: 28px; flex: none; display: grid; place-items: center; border: 0; padding: 0; background: none; color: var(--text2); cursor: pointer; }
.lnote .ln-x svg { width: 16px; height: 16px; margin: 0; stroke: currentColor; }
@media (max-width: 640px) {
  .lnote { left: 12px; right: 12px; width: auto; padding: 14px 10px 14px 14px; }
  .lnote .ln-try { margin-top: 6px; padding: 6px 0; } .lnote .ln-x { width: 44px; height: 44px; margin: -10px -4px 0 0; }
}

/* Live numbers (site.js yeetr.flash; Jacek approved "live prices" step 1, Oct 24, 2026): a number that changed tints green
   or red and fades back in 0.9 s. The keyframes leave out the end, so it returns to the element's own colour in either
   theme. The tint is up or down at 20% (it shows on a tinted box too, as the picked Up button) and spreads 3 px around the
   digits as a shadow, so nothing moves; digits are tabular (the body's "tnum", and here), one width with the system font
   in Lockdown Mode too. Reduce motion: the colour holds for the 0.9 s and goes back at once, no fade. */
.yfl { font-variant-numeric: tabular-nums; }
.yfl-up { animation: .9s ease-out yfl-up; } .yfl-down { animation: .9s ease-out yfl-down; }
@keyframes yfl-up { 0%, 25% { color: var(--up); background-color: color-mix(in srgb, var(--up) 20%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--up) 20%, transparent); } }
@keyframes yfl-down { 0%, 25% { color: var(--down); background-color: color-mix(in srgb, var(--down) 20%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--down) 20%, transparent); } }
@media (prefers-reduced-motion: reduce) { .yfl-up, .yfl-down { animation-timing-function: steps(1, end); } }