/* ========================================================================== THE HOUSE PALETTE. Two scales; :root IS the dark one and light overrides it. V578 (CR-14, the enforcement pass) moved three of these numbers, and only three, each by the smallest step the WCAG 2.1 AA floor allows. The reason they are HERE and not sprayed over the nine tools that consume them is that they were never nine bugs: --accent at #9a7300 measured 3.66:1 on --btn and 4.35:1 on white, so EVERY control that reads it -- Admin in the shell drawer, the install bar, the cookie bar, the sudoku pad, chess, minesweeper, snake, the maze HUD, tictactoe's score, version history, the 2FA buttons -- was below the floor at once, in light theme, on about twenty distinct colour pairs. One token was the whole list. tests/test_v578_contrast.py measures all of them and is what these values were chosen against; the ratios in the comments are its output, not an estimate. WHAT WAS *NOT* DONE: the hue did not move, and nothing was lightened toward its own ground to make a number pass. --accent is the same 45deg gold at the same 100% saturation, one step darker in L. ========================================================================== */ /* ========================================================================== V1062 --- `hidden` MEANS HIDDEN. SITE-WIDE, AND IT HAD STOPPED MEANING IT. THREE OF HIS REPORTS IN ONE EVENING WERE THIS ONE RULE MISSING: *"we don't need this black screen on always .. it should come up only when people click on scan"* -- the QR camera, permanently open *"Back to your practice table is not working"* -- it was SHOWN when there was no table to go back to, so it asked the server, found none, and returned him to the lobby looking like a dead button and in that same screenshot, "Open a practice table" and "Back to your practice table" sitting side by side -- two buttons the code makes mutually exclusive. THE CAUSE. `[hidden] { display: none }` comes from the BROWSER's own stylesheet, which every author rule outranks. So one line -- `#cardgames .btn { display: inline-flex }` -- quietly switched the attribute off for every button on that page, and `.scanwrap{display:flex}` did the same for the camera. The markup was right. The JavaScript was right. The stylesheet overruled both, and nothing on any screen said so. There are 820 `hidden` attributes across these templates. Every one is a promise that something stays out of the way until it is asked for, and every one was a single careless `display` away from breaking like these three. SO THE PLATFORM CONTRACT IS RESTORED ONCE, HERE, rather than patched per tool as each symptom is reported. `!important` is deliberate and is the whole point: this rule has to outrank author `display` declarations, because outranking them is the bug it exists to fix. An element that genuinely needs to paint while carrying the attribute does not exist on this site -- and if one ever does, it wants a class, not a `hidden` that lies. ========================================================================== */ [hidden] { display: none !important; } :root { --bg: #0b2e22; --panel: #0f3d2d; --line: #1d5642; --line2: #1d6a4f; --btn: #14503c; --text: #d9f2e5; --muted: #9fd6bc; --muted2: #7fc8a8; /* V578: was #6f9c88, which measured 3.03:1 on --btn and 3.93:1 on --panel -- under the floor everywhere it carried text (opinion's field labels and hints, /admin's .muted spans, the bullion notes, the PDF hints). #a1bcae is the LIGHTEST it can be and still clear 4.5:1 on --btn, the brightest surface it lands on: 4.60 on --btn, 5.98 on --panel, 7.23 on --bg. It is still the faintest of the three muted steps (--muted 8.98 on --bg, --muted2 7.51, --muted3 7.23) -- the scale survives, compressed. */ --muted3: #a1bcae; --accent: #ffcf5c; --accent-fg: #3d2c05; --good: #8fd45e; --good-line: #2e7d5b; --backdrop: rgba(4, 20, 14, 0.72); --backdrop2: rgba(4, 20, 14, 0.82); --board: #0e3a2b; --trace: rgba(140,230,190,0.07); --pad: rgba(140,230,190,0.12); --wire-outline: #07241a; --soln-bg: rgba(7,36,26,0.85); --soln-fg: #ffcf5c; /* --gold is the MEDAL colour: the leaderboard's own-row rule, the podium border, the calendar's reminder dot. It is a decoration token and it is not legible as body text on a light ground (#c79600 measures 2.70:1 on white), so V578 moved the four places that used it AS TEXT onto --accent rather than darkening it into a second copy of --accent. */ --gold: #ffd700; /* V578: THE DANGER RED, which this site did not have and therefore had five of. #ff5252 (the maze's "live" pill), #e0524d (Clear all WhatsApp settings, the bullion alert badge), #e5484d (Discard), #e07a6a (Purge raw technical data) and #ff8b6b (the required-field star) were five hand-picked reds, none of them theme-aware, measuring 2.09:1 to 3.83:1. A warning nobody can read is worse than no warning, so there is now ONE token for red TEXT -- per theme, because a red legible on #0f3d2d is not one legible on #f4f4f7 -- and one for a red FILL with its own ink. A fill dark enough for white text works on either theme, which is why --bad-fill and --bad-fg are declared once and not overridden. --bad dark #f1a19e 4.61 on --btn, 5.99 on --panel, 7.23 on --bg --bad light #cc231d 4.62 on --btn, 5.00 on --panel, 5.49 on --bg --bad-fill #e52019 4.61 under --bad-fg (white), in both themes */ --bad: #f1a19e; --bad-fill: #e52019; --bad-fg: #ffffff; /* V578: THE FURNITURE'S ACCENT, and the one token a tool may not repaint. templates/raffle.html says it out loud -- "base.html's own chrome (the drawer, the back button, the admin chip) reads the house tokens, so repainting them globally would repaint the furniture" -- and then declares `#rh { --accent: #0f62d6 }` on the element that CONTAINS the back button, so the back button was repainted anyway: RaffleHub's product blue on the house green --btn, 1.67:1 in dark theme. templates/finance.html and templates/splits.html do the same with their teal (3.67:1). Custom properties inherit, which is the whole point of them, so "house chrome" and "the tool's accent" cannot be the same name. This is declared at :root only, and a tool that overrides --accent inside itself no longer changes the chrome sitting in its own subtree. */ --chrome-accent: #ffcf5c; } /* ====================================================================== V987 THIS BLOCK, AND THE `--hub-sheet` LINE BELOW, ARE THE ONLY TWO RULES IN THE TREE STILL KEYED ON THE NAME "light" -- and they must be, because they are what DEFINES that theme. Every other rule that used to say `html[data-theme="light"] ` now says `html:not([data-dark])`. WHY: parchment is a LIGHT theme whose name is not "light". Sixty-nine rules across twenty-four files asked the wrong question -- "is the theme called light" rather than "is this a light ground" -- so under parchment every one of them handed a tool its DARK colours on a warm ivory background. Measured before the change: the top bar's title at 1.04:1, Kids Corner's star count at 1.36, To-Do's add-subtask at 1.42, and more. SAME SPECIFICITY, so nothing in the cascade moved: `html` (0,0,1) plus one attribute (0,1,0) is (0,1,1) either way. THIS IS V985'S ONE BIT USED THE OTHER WAY ROUND. That release added `data-dark` so a stylesheet could ask whether the theme is dark; the absence of it is the answer to "is it light", and it stays correct for every theme added after this one without anybody editing twenty-four files again. */ html[data-theme="light"] { --bg: #ffffff; --panel: #f4f4f7; --line: #dcdce4; --line2: #c8c8d2; --btn: #ebebf1; --text: #1a1a22; --muted: #4e4e5e; --muted2: #66667a; /* --good is re-declared at the end of this block, with its reason. */ /* V578: was #8a8a98 (2.87:1 on --btn, 3.10:1 on --panel, 3.40:1 on white). #686876 is the lightest that clears 4.5:1 on --btn: 4.62 on --btn, 4.99 on --panel, 5.48 on white. It lands very close to --muted2 (4.72 on --btn) and that is not sloppiness -- between --muted2 and the 4.5:1 floor there is 0.22 of a ratio point left, so a third distinct step is not available on this ground. The name is kept because the ROLE is (faintest text, and the ghost-button boundary V526 chose it for). */ --muted3: #686876; /* V578: was #9a7300 -> 3.66:1 on --btn, 3.96:1 on --panel, 4.35:1 on white, i.e. below the floor on all three of the grounds it is used on, and below it BOTH ways round (as ink on --btn, and under white --accent-fg as a fill). #866400 is the lightest 45deg gold that clears 4.5:1 on --btn: --accent on --btn 4.61:1 (Admin, sudoku pad, chess, stocks, .back) --accent on --panel 4.99:1 (version history "See all", ms-hint) --accent on --bg 5.47:1 (maze HUD timer, chess status) --accent-fg on --accent 5.47:1 (install bar, cookie bar, save buttons) */ --accent: #866400; --accent-fg: #ffffff; --good-line: #7cc78f; --backdrop: rgba(0, 0, 0, 0.45); --backdrop2: rgba(0, 0, 0, 0.55); --board: #e4e7ec; --trace: rgba(0,0,0,0.10); --pad: rgba(0,0,0,0.12); --wire-outline: #33333c; --soln-bg: rgba(255,255,255,0.9); /* the solution overlay's ink sits on a 90%-white scrim, so it tracks --accent */ --soln-fg: #866400; --gold: #c79600; --bad: #cc231d; /* --bad-fill / --bad-fg are theme-independent, see :root */ --chrome-accent: #866400; /* tracks --accent; see the note in :root */ /* V578: was #1f8a3d -- 3.71:1 on --btn, 4.02:1 on --panel, 4.41:1 on white, so every "saved"/"ok"/"positive" message in the light theme was under the floor. #1c7935 is the same 137deg green one step darker: 4.61 on --btn, 4.99 on --panel, 5.47 on white (and 5.47 under white, as a fill). */ --good: #1c7935; } /* ========================================================================== V910 โ€” THE THREE NEW DARK SCALES. Same shape as the light block above. HIS FOUR, and where each one lives: green :root, above. NOT REPEATED HERE and that is the point -- it needs no CSS, which also makes it the fallback of last resort for a saved row that has gone empty, a browser with localStorage blocked, and a page rendered before the AppSetting row exists at all. zinc hub gold the zinc neutral scale carrying the house gold. graphite cooler and bluer, surfaces one step lighter. glass translucent panels over a blurred ground. THE ONLY ONE OF THE FOUR THAT IS NOT A PURE TOKEN SWAP -- see its block. THE ATTRIBUTE IS STILL `data-theme`. Widening the VALUE set rather than introducing a second attribute is what keeps the ~4 existing `html[data-theme="light"] โ€ฆ` rules in this file, and every one in the nine tool stylesheets, working with no edit. A legacy stored "dark" matches none of these blocks and therefore lands on :root, which is green: correct by construction rather than by a migration. --accent IS THE SAME 45deg GOLD IN ALL THREE, deliberately. V578's whole finding was that --accent is one token feeding about twenty colour pairs at once, and --chrome-accent is declared at :root ONLY because templates/raffle, finance and splits each repainted the furniture by overriding --accent inside themselves (1.67:1 on the back button, measured). Three new accents would be three new copies of that audit. If a theme is meant to carry its own accent it is one line in its block plus a re-run of test_v578_contrast.py, and the ratios in that suite's output -- not an estimate -- are what the value has to be chosen against. V916: THESE ARE THE PALETTES, not placeholders any more. They were pasted in under that label in V910 and nothing measured them for six releases, because the contrast sweep looped over ("dark", "light") -- written before these three existed and never widened. V916 widened it to every theme the stylesheet declares, and these came back the STRONGEST of the five: body text 13-17:1 where 4.5 is the floor, and not one pair below it anywhere. So the label came off rather than the colours being replaced. What the widened sweep DID find was three faults none of these blocks caused -- RaffleHub and Tune Book printing the house --text on their own light ground, and the back button's chip compositing to near-white wherever --btn is translucent. All three are fixed where they live; all three had been invisible. Each theme is still exactly one block, so a future repaint is one paste per theme and touches nothing else. test_v910 asserts the SHAPE (every block declares the same token set the light block does) and test_v578_contrast now MEASURES every one of them, so a swap is guarded on both axes. ========================================================================== */ /* V918 --- GLASS IS GONE, ON HIS INSTRUCTION OF 02-Oct-2026, AND THIS NOTE IS WHY RATHER THAN A GAP. It was the only one of the four darks that was not a pure token swap: it made --panel TRANSLUCENT, which only reads as glass if the surface is also blurred, so it carried a property the token set had never needed -- `--hub-blur`, read through `backdrop-filter` by a dozen panel rules. A blurred layer is recomposited on the GPU every frame it moves, and a full-screen blur under a scrolling list on a mid-range phone is the one thing in this stylesheet that could cost frames. The note here used to say "measure it on Bingo before enabling it for the games". He decided not to carry the question. WHAT WENT WITH IT, so nobody hunts for it: this block, the `--hub-blur` and `--hub-bg-img` tokens, the `body { background-image }` rule that painted its gradients, and the backdrop-filter rule over .card/.panel/.pane and the rest. None had another reader -- glass was the only theme that set either token, so every one of those rules was a no-op for the other four. `--hub-sheet` STAYS: zinc, light and :root all set it, and it has nothing to do with blur. A FIFTH THEME IS STILL ONE BLOCK HERE PLUS ONE NAME IN theme_admin.DARKS, exactly as before. Nothing about removing this one narrowed that. */ /* ====================================================================== V987 HIS THREE, 10-Oct-2026: *"oxyblood, forest night and parchmnet pls.. drop others and build these (keep current light and green theme)"*. AND ZINC AND GRAPHITE ARE GONE IN THE SAME RELEASE, on his word of the same day: *"delete all existing themes other than current light and green.. others are not as effective as was demoed"*. (Glass went in V918, on his instruction of 02-Oct, so two went here and not three.) WHY THOSE THREE DID NOT WORK, which is the whole argument for the shape of these: zinc, graphite and glass were the same neutral grey a few points apart and all three carried the SAME GOLD. The ground barely moved and the accent never did, so on a screen full of tables, chips and muted sub-text they read as one theme with a slightly different panel -- which is exactly what he said, that the demo and the site did not match. SO EACH OF THESE MOVES TWO THINGS: the HUE OF THE GROUND and the ACCENT. oxblood deep wine, brass accent. Warm, and the furthest from anything that was here. forest deep pine -- much darker and greyer than the house green, on purpose, so the two cannot read as one theme at two brightnesses. parchment A LIGHT THEME THAT IS NOT WHITE. Warm ivory, brown-grey ink. That is the gap his pair actually had, and it is why this block has the LIGHT shape (dark overlays, a dark wire outline, the lighter gold) rather than the dark one. MEASURED BEFORE THEY WERE DRAWN, not adjusted by eye afterwards: body text and all three muted steps against all three grounds, plus the accent and its own ink. The worst pair across the three is parchment's 4.55:1 against a 4.5 floor; the other two sit above 6.5. test_v578_contrast measures every theme the stylesheet declares, so these are now in that sweep by existing. THE SECTION BARS DO NOT CHANGE. --hdr is deliberately one navy in every theme; the note above that block says why and this release does not reopen it. */ html[data-theme="oxblood"] { --bg: #1c0f12; --panel: #271519; --line: #3a2128; --line2: #4e2d35; --btn: #2e1920; --text: #f5e8ea; --muted: #d2b2b8; --muted2: #c6a4ab; --muted3: #be9ba3; --accent: #e8b765; --accent-fg: #2a1c03; --good: #8fd29c; --good-line: #4a6b52; --backdrop: rgba(6, 6, 8, 0.74); --backdrop2: rgba(6, 6, 8, 0.84); --board: #221216; --trace: rgba(255,255,255,0.06); --pad: rgba(255,255,255,0.11); --wire-outline: #120809; --soln-bg: rgba(9,9,11,0.85); --soln-fg: #e8b765; --gold: #ffd700; --bad: #f4a39f; --chrome-accent: #e8b765; --hub-sheet: #2d181e; } html[data-theme="forest"] { --bg: #101a15; --panel: #17241d; --line: #233429; --line2: #2f4637; --btn: #1c2a22; --text: #e6f0e8; --muted: #b2c8b9; --muted2: #a6bdad; --muted3: #9eb6a6; --accent: #e3c17a; --accent-fg: #2a2105; --good: #86d49a; --good-line: #3c6b4e; --backdrop: rgba(6, 6, 8, 0.74); --backdrop2: rgba(6, 6, 8, 0.84); --board: #13201a; --trace: rgba(255,255,255,0.06); --pad: rgba(255,255,255,0.11); --wire-outline: #0a110d; --soln-bg: rgba(9,9,11,0.85); --soln-fg: #e3c17a; --gold: #ffd700; --bad: #f2a29e; --chrome-accent: #e3c17a; --hub-sheet: #1b2a22; } html[data-theme="parchment"] { --bg: #faf6ee; --panel: #f4efe4; --line: #e0d6c3; --line2: #cdbfa6; /* V987: --btn and --panel sit one step lighter than the first draft (#eae1cf / #f2ebdd). The SHARED inks -- the ones a tool declares once and prints on whatever ground it lands on, like FinTrack's #0a7859 and To-Do's #80660c -- measured 4.21 and 4.23 against a 4.5 floor there. Lifting the ground was the one-line fix; darkening two tools' inks would have been two tools changed for one theme. */ --btn: #f1ebdf; --text: #241f17; --muted: #534a3a; --muted2: #5e5443; --muted3: #665c4a; --accent: #8a5a12; --accent-fg: #ffffff; --good: #1f6b46; --good-line: #7cc78f; --backdrop: rgba(0, 0, 0, 0.45); --backdrop2: rgba(0, 0, 0, 0.55); --board: #ece3d2; --trace: rgba(0,0,0,0.10); --pad: rgba(0,0,0,0.12); --wire-outline: #3a3226; --soln-bg: rgba(255,255,255,0.9); --soln-fg: #8a5a12; --gold: #c79600; --bad: #a8271f; --chrome-accent: #8a5a12; --hub-sheet: #fffaf2; } /* --hub-sheet is the one token from that group that OUTLIVES glass: zinc, light and :root all set it, and it is a flat colour with no blur in it. */ :root { --hub-sheet: #123b2d; } html[data-theme="light"] { --hub-sheet: #ffffff; } /* ========================================================================== V910 โ€” THE THEME SHEET (long press on #themebtn). IN THIS FILE, not in a new stylesheet, for findialog's reason stated further up: "its CSS is in line_escape.css, the one stylesheet this file loads, because the component is site furniture rather than one tool's." It is the theme control, which the head of base.html calls the only control on the site that changes the theme. A second site-wide stylesheet is also the exact thing test_v455 exists to refuse (V764 shipped one by accident and it caught it). AN ACTION SHEET AND NOT A MENU. His words were "iPhone style drop down", and on iOS that control is anchored to the bottom of the screen with a separate Cancel below it -- which is also the only shape that stays reachable one- handed on the phone this is used on, given #themebtn floats at the bottom right. Nothing here is fixed to the TOP, so it never argues with the frozen tab row (V653) or the notch. ========================================================================== */ /* pointer-events, NOT `hidden` or `display`, and this is the bit that bites. The scrim is built once and then lives in the DOM at `inset: 0` forever. At opacity 0 it is invisible and STILL SWALLOWS EVERY CLICK ON THE PAGE -- a whole site made unusable by one long press, with nothing on screen to show why. Toggling it on the same class that fades it means the two can never disagree, and both directions still animate (display: none would kill the fade-out, and a timer to flip it would be a race against the transition). */ #hub-theme-scrim { position: fixed; inset: 0; z-index: 2147483000; background: var(--backdrop2); opacity: 0; pointer-events: none; transition: opacity .2s ease; } #hub-theme-scrim.in { opacity: 1; pointer-events: auto; } #hub-theme-sheet { position: fixed; z-index: 2147483001; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); max-width: 460px; margin: 0 auto; transform: translateY(116%); transition: transform .26s cubic-bezier(.2,.9,.25,1); } #hub-theme-sheet.in { transform: translateY(0); } #hub-theme-sheet .hts-grp { background: var(--hub-sheet); border: 1px solid var(--line2); border-radius: 14px; overflow: hidden; -webkit-backdrop-filter: saturate(170%) blur(22px); backdrop-filter: saturate(170%) blur(22px); } #hub-theme-sheet .hts-ttl { text-align: center; font-size: 12px; color: var(--muted3); padding: 10px 12px 9px; border-bottom: 1px solid var(--line); } /* 48px of row, not 44: this is a list read and tapped in the dark, and the v455 rule 1.1 floor is a floor. */ #hub-theme-sheet button.hts-item { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--line); color: var(--text); font: inherit; font-size: 15px; padding: 12px 14px; cursor: pointer; } #hub-theme-sheet button.hts-item:last-child { border-bottom: 0; } #hub-theme-sheet button.hts-item:active { background: var(--btn); } #hub-theme-sheet button.hts-item:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; } #hub-theme-sheet .hts-nm { margin-right: auto; } #hub-theme-sheet .hts-sub { font-size: 11px; color: var(--muted3); } #hub-theme-sheet .hts-tick { color: var(--accent); font-weight: 800; } #hub-theme-sheet button.hts-cancel { margin-top: 8px; width: 100%; min-height: 48px; background: var(--hub-sheet); border: 1px solid var(--line2); border-radius: 14px; color: var(--accent); font: inherit; font-weight: 700; font-size: 15px; padding: 12px; cursor: pointer; -webkit-backdrop-filter: saturate(170%) blur(22px); backdrop-filter: saturate(170%) blur(22px); } /* The half-second hold, shown rather than guessed at. Without it a long press reads as a dead button until the sheet arrives. */ #themebtn.hub-armed { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 55%, transparent); } @media (prefers-reduced-motion: reduce) { #hub-theme-scrim, #hub-theme-sheet { transition: none; } } * { margin: 0; padding: 0; box-sizing: border-box; } html, body { /* v486: was `height: 100%`. THIS was the bug behind "the Admin and Add buttons start at the bottom, then ride up the screen as I scroll and stop in the middle" on iPhone. With height:100% the body is exactly one viewport tall and the content overflows it. iOS Safari then resolves a bottom-anchored position:fixed element against that one-viewport-tall box rather than against the visual viewport, so it behaves like position:absolute โ€” correctly pinned at scroll zero, then scrolling away upward with everything else. It affected every bottom-fixed chrome on the site at once: the ๐Ÿ›  Admin chip injected in base.html, FinTrack's #fin-fab (๏ผ‹ Add), and #refreshbtn. min-height:100% keeps the ONLY thing height:100% was there for โ€” a full-bleed background when a page is shorter than the screen โ€” while letting the body grow to its real content height, which is what makes position:fixed resolve against the viewport again. Nothing depended on the hard constraint: the game shells size themselves with 100dvh on #game-root, not with a percentage of the body. */ min-height: 100%; background: var(--bg); color: var(--text); font-family: -apple-system, "Segoe UI", Roboto, sans-serif; overscroll-behavior: none; /* V573: user-select: none was HERE and is gone. See the V542 block below for what it cost and why removing it is safe. -webkit-tap-highlight-color stays: it suppresses the grey flash on tap, which is unrelated to selection. */ -webkit-tap-highlight-color: transparent; } /* ========================================================================= V547 โ€” EVERY ADMIN SETTING IN ITS OWN BLOCK The admin pages were a flat run of headings and controls with nothing between them, so a radio group could belong to the heading above it or the one below and there was no way to tell by looking. The owner's report was exactly that. The boundary already existed -- an

starts a new setting -- so the card is drawn around it rather than a new one being invented. tool_admin_blocks.js does the wrapping; this only paints it. ====================================================================== */ .ta-block { background: var(--panel); border: 1px solid var(--line2); border-radius: 12px; padding: 14px 16px 16px; margin: 0 0 16px; } /* The heading is the card's header, so it loses its own outside margin and gains a rule under it -- which is what makes "these controls belong to this label" readable at a glance, and is the whole point of the change. */ .ta-block > h2 { margin: 0 0 12px; padding-bottom: 10px; border-bottom: 1px solid var(--line); font-size: 16px; } .ta-block > h2:only-child { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; } /* V968: a BAND-ONLY heading (V966's h2.sechd, used where the template could not be wrapped) is still a boundary for tool_admin_blocks.js, so .ta-block now draws its card body. The band must sit FLUSH at the card's top rather than floating inside its padding, hence the negative margins, and it keeps the band's own type -- the generic rules above would give it a 16px title and a rule underneath, which is a second divider directly below a solid navy bar. */ .ta-block > h2.sechd { margin: -14px -16px 12px; padding: 10px 14px; border-bottom: 0; border-radius: 11px 11px 0 0; font-size: 14.5px; } .ta-block > h2.sechd:only-child { margin-bottom: -16px; } /* A .panel inside a card would be a box inside a box saying the same thing. */ .ta-block > .panel { border: 0; padding: 0; background: none; margin-bottom: 10px; } /* A SUB-SETTING inside a card. Settings holds "Page layout"; FinTrack holds three. CSS cannot wrap an h3 and its controls the way the script wraps an h2, so the separation is drawn as a rule ABOVE each sub-heading -- which is enough to say "a new setting starts here" and is what was missing from the owner's screenshot, where Page layout ran straight into the download setting below it. */ .ta-block > h3 { margin: 18px 0 8px; font-size: 14px; padding-top: 14px; border-top: 1px solid var(--line); color: var(--accent); } .ta-block > h3:first-of-type { margin-top: 4px; padding-top: 0; border-top: 0; } /* Sub-settings inside one card -- FinTrack has three -- get a light left rule so a card holding several is still legible as several. */ .ta-block .ta-sub { border-left: 2px solid var(--line2); padding-left: 12px; margin: 12px 0; } @media (max-width: 640px) { .ta-block { padding: 12px 12px 14px; border-radius: 10px; } } @media print { .ta-block { break-inside: avoid; } } /* ========================================================================= V542 / V573 โ€” TEXT YOU ARE MEANT TO READ IS SELECTABLE AGAIN The body USED TO SET user-select: none. That came from the drag-based games, where an accidental text selection ruins a swipe -- but it applied to the WHOLE app, so no table cell, error message, GL code or chord name anywhere on the site could be selected or copied. The owner hit it on the taxonomy import preview: a row saying which category was a problem, and no way to copy it into a message. V542 restored selection for the surfaces below -- an allow-list, which is why the owner kept finding new places he could not copy from: a paragraph, a heading and a definition are all things you read, and none of them is a . V573 removes the rule from `body` instead, so the default is "selectable" and only the boards opt out. THIS CORRECTS THE V542 WORDING, which said "The body above sets user-select: none" -- true when it was written, false since V573, and a sentence a future reader would have trusted. THE BOARDS ARE UNAFFECTED, and each was checked rather than assumed: #ms-board minesweeper.css:73 #sk-board sudoku.css:72 .ch-piece chess.css:76 .tt-cell tictactoe.css:16 .ws-tile wordsweeper.css:16 .sn-pad snake.css:127 Note the first two are ID selectors; V542's note wrote them as classes. All six win twice over: their stylesheets load from {% block head %}, which base.html renders AFTER this file, and an id or class beats a bare `body` on specificity anyway. So removing the body rule cannot re-enable selection on a board even if the load order ever changed. The rules below are now belt-and-braces rather than the mechanism, and are kept: `input`/`textarea`/`[contenteditable]` are the one group where a UA stylesheet or a future container rule could still turn selection off, and losing selection in a text field is the worst version of this bug. ====================================================================== */ table, th, td, pre, code, kbd, samp, input, textarea, [contenteditable="true"], .fb-modal, .bio-modal, .tb-app:not(.tb-stage) { -webkit-user-select: text; user-select: text; } #game-root { height: 100dvh; display: flex; flex-direction: column; } #hud { display: flex; align-items: center; gap: 14px; padding: calc(10px + env(safe-area-inset-top)) 16px 10px; color: var(--muted); } #hud-level { font-size: 18px; font-weight: 600; letter-spacing: 0.5px; line-height: 1.2; } #hud-band { font-size: 12px; font-weight: 500; color: var(--muted2); } #hud-stars { color: var(--accent); letter-spacing: 1px; } #hud-wires { color: var(--text); font-weight: 600; } #hud-hint, #hud-solution { background: var(--btn); color: var(--accent); border: 1px solid var(--line2); border-radius: 10px; font-size: 14px; font-weight: 600; padding: 8px 14px; cursor: pointer; } #hud-hint:active, #hud-solution:active { transform: scale(0.96); } #hud-hint.used, #hud-solution.used { opacity: 0.35; color: var(--muted3); cursor: default; } #hud-solution.hidden { display: none; } #hud-level.tappable { text-decoration: underline dotted; cursor: pointer; } #hud-lives { font-size: 17px; letter-spacing: 2px; background: var(--btn); border: 1px solid var(--line2); border-radius: 10px; padding: 6px 12px; } #hud-lives .life { color: var(--accent); } #hud-lives .life.lost { color: var(--line); } #board-wrap { flex: 1; display: flex; align-items: center; justify-content: center; padding: 6px 10px calc(14px + env(safe-area-inset-bottom)); min-height: 0; } #board { touch-action: none; display: block; border-radius: 12px; } #overlay { position: fixed; inset: 0; background: var(--backdrop); display: flex; align-items: center; justify-content: center; z-index: 10; } #overlay.hidden { display: none; } #overlay-card { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 28px 32px; text-align: center; color: var(--text); max-width: 320px; } #overlay-card h2 { font-size: 22px; margin-bottom: 8px; } #overlay-card p { font-size: 14px; color: var(--muted); margin-bottom: 18px; } #overlay-card p { white-space: pre-line; } #overlay-btn, #overlay-btn2 { background: var(--accent); color: var(--accent-fg); border: 0; border-radius: 10px; font-size: 16px; font-weight: 600; padding: 12px 28px; cursor: pointer; margin: 4px 6px 0; } #overlay-btn:active, #overlay-btn2:active { transform: scale(0.97); } #overlay-btn2 { background: var(--btn); color: var(--accent); border: 1px solid var(--line2); } #overlay-btn2.hidden { display: none; } /* ---------- HUD row 2: timer + best times ---------- */ #hud-row2 { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 0 16px 6px; color: var(--muted); font-size: 13px; } #hud-timer { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--accent); font-size: 15px; } #hud-best { text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #hud-best .mine { color: var(--text); font-weight: 600; } #hud-best .flag, .flag { vertical-align: -1px; border-radius: 2px; } #hud-levels { background: var(--btn); color: var(--text); border: 1px solid var(--line2); border-radius: 10px; font-size: 13px; font-weight: 600; padding: 8px 10px; cursor: pointer; } #hud-levels:active { transform: scale(0.96); } #hud-checks { background: var(--btn); color: var(--muted); border: 1px solid var(--line2); border-radius: 10px; font-size: 13px; font-weight: 600; padding: 8px 10px; } #hud-checks.used { opacity: 0.35; } #hud-lives .bonus { color: var(--good); font-size: 13px; margin-left: 4px; letter-spacing: 0; } /* ---------- toast ---------- */ #toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); transform: translateX(-50%) translateY(20px); background: var(--panel); border: 1px solid var(--line2); color: var(--text); font-size: 13px; padding: 10px 16px; border-radius: 10px; opacity: 0; pointer-events: none; transition: opacity 0.25s, transform 0.25s; z-index: 30; max-width: 90vw; text-align: center; } #toast.show { opacity: 1; transform: translateX(-50%) translateY(0); } /* ---------- level browser ---------- */ #picker { position: fixed; inset: 0; background: var(--backdrop2); display: flex; align-items: center; justify-content: center; z-index: 20; } #picker.hidden { display: none; } #picker-card { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; width: min(560px, 94vw); max-height: 86dvh; display: flex; flex-direction: column; padding: 16px; color: var(--text); } #picker-head { display: flex; align-items: center; gap: 8px; } #picker-head h2 { font-size: 18px; margin-right: auto; } #picker-head select, #picker-head input { background: var(--bg); color: var(--text); border: 1px solid var(--line); border-radius: 8px; padding: 7px 8px; font-size:var(--fld-fs,13px); } #picker-head input { width: 78px; } #picker-head button { background: var(--btn); color: var(--accent); border: 1px solid var(--line2); border-radius: 8px; padding: 7px 12px; font-weight: 600; cursor: pointer; } #picker-sub { color: var(--muted2); font-size: 12px; margin: 8px 0 12px; } #picker-grid { overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 8px; padding-bottom: 4px; } .chip { background: var(--bg); border: 1px solid var(--line); border-radius: 10px; color: var(--text); padding: 8px 4px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 2px; } .chip .n { font-weight: 700; font-size: 15px; } .chip .t { font-size: 11px; color: var(--muted2); } .chip.solved { border-color: var(--good-line); } .chip.solved .t { color: var(--good); } .chip.current { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; } .chip.current .t { color: var(--accent); font-weight: 600; } .chip.locked { cursor: not-allowed; } .chip.locked .n { filter: blur(4px); opacity: 0.5; } .chip.locked .t { filter: none; } .chip.more { grid-column: 1 / -1; color: var(--muted2); } .chip.pulse { animation: chip-pulse 0.4s ease 3; } @keyframes chip-pulse { 50% { transform: scale(1.08); border-color: var(--accent); } } #hud-replay { color: var(--accent); font-size: 13px; font-weight: 600; } /* ---------- back + trophy buttons ---------- */ #hud-back { background: var(--btn); color: var(--text); border: 1px solid var(--line2); border-radius: 10px; font-size: 16px; font-weight: 700; padding: 7px 12px; text-decoration: none; line-height: 1; } #hud-back:active { transform: scale(0.96); } #hud-lb { background: var(--btn); border: 1px solid var(--line2); border-radius: 10px; font-size: 14px; padding: 8px 10px; cursor: pointer; } #hud-lb:active { transform: scale(0.96); } /* ---------- in-game leaderboard panel ---------- */ #lbpanel { position: fixed; inset: 0; background: var(--backdrop2); display: flex; align-items: center; justify-content: center; z-index: 20; } #lbpanel.hidden { display: none; } #lbpanel-card { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; width: min(480px, 94vw); max-height: 86dvh; overflow-y: auto; padding: 16px; color: var(--text); } #lbpanel-head { display: flex; align-items: center; gap: 10px; } #lbpanel-head h2 { font-size: 18px; margin-right: auto; } /* V578: was a hard-coded #ff5252 -- 2.91:1 on the light panel, 3.81:1 on the dark one, i.e. a "live" indicator that was not legible in either theme. */ #lb-live { color: var(--bad); font-size: 11px; animation: um-live 1.1s ease-in-out infinite; } @keyframes um-live { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } } #lb-close { background: var(--btn); color: var(--accent); border: 1px solid var(--line2); border-radius: 8px; padding: 6px 11px; font-weight: 600; cursor: pointer; } #lb-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; margin-top: 12px; } #lb-table th, #lb-table td { padding: 8px 8px; border-bottom: 1px solid var(--line); text-align: left; } #lb-table th { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: 1px; } #lb-table th:nth-child(3), #lb-table td:nth-child(3), #lb-table th:nth-child(4), #lb-table td:nth-child(4) { text-align: right; font-variant-numeric: tabular-nums; padding-right: 26px; } #lb-table td:first-child { font-size: 15px; } /* Top-3 rows: medals only (๐Ÿฅ‡๐Ÿฅˆ๐Ÿฅ‰ in the first column) โ€” no gold/silver/ bronze row tint or coloured stripe. */ #lb-table tr.me td { background: var(--btn); font-weight: 700; font-size: 15px; color: var(--text); border-top: 1.5px solid var(--gold); border-bottom: 1.5px solid var(--gold); padding-top: 11px; padding-bottom: 11px; animation: um-meglow 2.2s ease-in-out infinite; } /* V578: the BORDER stays --gold (that is the medal, and a 1.5px rule is decoration, not text) but the TEXT does not: --gold measures 2.55:1 on --btn in light theme. --accent is the same family and clears the floor on this row. See the --gold comment at the top of this file. */ #lb-table tr.me td:first-child { border-left: 1.5px solid var(--gold); border-radius: 10px 0 0 10px; color: var(--accent); } #lb-table tr.me td:last-child { border-right: 1.5px solid var(--gold); border-radius: 0 10px 10px 0; color: var(--accent); } @keyframes um-meglow { 0%, 100% { box-shadow: 0 -6px 14px -8px rgba(255,215,0,0.45), 0 6px 14px -8px rgba(255,215,0,0.45); } 50% { box-shadow: 0 -8px 18px -6px rgba(255,215,0,0.85), 0 8px 18px -6px rgba(255,215,0,0.85); } } #lb-table tr.gap td { text-align: center; color: var(--muted3); border-bottom: 0; padding: 3px; } #lb-me { margin-top: 12px; color: var(--muted); font-size: 13px; } #hud-wires2 { color: var(--text); font-weight: 600; font-size: 13px; } /* ---------- mobile: compact HUD so timer + records stay visible ---------- */ @media (max-width: 520px) { #hud { padding: calc(6px + env(safe-area-inset-top)) 8px 6px; gap: 4px; flex-wrap: wrap; } #hud-level { font-size: 14px; } #hud-back, #hud-levels, #hud-lb, #hud-hint, #hud-checks { font-size: 12px; padding: 5px 7px; border-radius: 8px; } #hud-lives { font-size: 13px; letter-spacing: 1px; padding: 5px 8px; } #hud { gap: 8px; } #hud-row2 { flex-wrap: wrap; padding: 0 8px 4px; font-size: 11px; gap: 6px; } #hud-timer { font-size: 13px; } #hud-best { white-space: normal; text-align: right; flex: 1; } #board-wrap { padding: 4px 6px calc(8px + env(safe-area-inset-bottom)); } } /* small difficulty stars under the level number */ #hud-stars2 { font-size: 10px; color: var(--accent); letter-spacing: 2px; line-height: 1.3; } @media (max-width: 520px) { #hud-stars2 { font-size: 8px; letter-spacing: 1px; } } /* ---------- cookie consent bar ---------- */ #cookiebar { position: fixed; left: 0; right: 0; bottom: 0; background: var(--panel); border-top: 1px solid var(--line2); color: var(--text); font-size: 13px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: center; z-index: 50; font-family: -apple-system, "Segoe UI", Roboto, sans-serif; } #cookiebar.hidden { display: none; } #cookiebar a { color: var(--muted2); } #cookiebar .cb-btns { display: flex; gap: 8px; } #cookiebar button { border-radius: 8px; padding: 8px 14px; font-weight: 600; cursor: pointer; font-size: 13px; } #cb-essential { background: var(--btn); color: var(--text); border: 1px solid var(--line2); } #cb-all { background: var(--accent); color: var(--accent-fg); border: 0; } /* ---------- V671: a 44px tap area for a link that must not change size -------- * * HIS ASK, after seeing the before/after mockup: "ok,.fix all". * * The floor in the (pointer: coarse) block below covers `button`, `.mini`, `.back` * and a handful of named controls. It never covered a BARE -- and the links it * misses are the ones in running text and in footers, measured at 14 to 17px tall. * * PADDING, PULLED BACK BY AN EQUAL NEGATIVE MARGIN. The visible text does not move * and the line it sits on does not grow; only the hit box does. `min-width` is * deliberately NOT set: a text link given a 44px minimum width becomes a block and * shoves its neighbours apart, which is a worse bug than the one being fixed. * * `.tap-row` is the other half. Three 44px boxes on one line would otherwise stretch * that line to 44px; the row keeps its own line-height and lets the boxes overlap it, * which is safe precisely because they are siblings on a single line. * * ONLY ON A TOUCH SCREEN. On a mouse a 14px link is a 14px target and that is fine -- * this is the same condition the floor below uses, for the same reason. */ /* =========================================================================== * V1034 --- THE KEYBOARD RING, WHERE IT HAD GONE MISSING * =========================================================================== * Tabbed through all 82 no-argument pages and read the computed style of * whatever had focus. TABBED, not `element.focus()` from script: this site * styles `:focus-visible`, which matches on keyboard focus, so a sweep that * focuses programmatically measures a state nobody is ever in. * * 35 controls on 17 pages showed nothing at all. Two causes, and the first * was the bigger one: * * 1 `SEL:focus { outline: none; ... }` -- fifteen rules in the tool * stylesheets and five more in templates' inline