/* Generated by tools/cut_launch_appearance.py from the locked palette; do not hand-edit. */ @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 400; font-display: swap; src: url('/static/launch/appearance/manrope-400.woff2') format('woff2'); } @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 500; font-display: swap; src: url('/static/launch/appearance/manrope-500.woff2') format('woff2'); } @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 600; font-display: swap; src: url('/static/launch/appearance/manrope-600.woff2') format('woff2'); } @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 700; font-display: swap; src: url('/static/launch/appearance/manrope-700.woff2') format('woff2'); } /* SLATE TWINS, 2026-10-01 - knowledge/plans/phone-look-consistency-2026-10-01.md, item 0 (RULED 2026-10-01 22:05:48 UTC, his word as typed: "keep") and item 1 (RULED 22:08:28 UTC, his word as typed: "keep"). Every LIVE warm value in this file took its slate twin (hue 205, lightness stepped to hold the warm value's contrast on white - the table is in the plan's Build record) and the cream #FBF6EC took plain white. Comments below that still name a warm value or "cream" are the history of the line, not what it paints now. */ html body[data-concept="a"] { --kt-sans:"Manrope",sans-serif;--kt-figs:"Manrope",sans-serif;--kt-ground:#E4E9EC;--kt-ink:#17242E;--kt-slate:#5B6B76;--kt-line:#D8DDE1;--kt-teal:#17242E;--kt-teal-deep:#5B6B76; color:#17242E!important; background:#E4E9EC!important; } /* RULED 2026-09-30 20:20:58 UTC "go with slate": the Slate ground and the bar as the pressed fill; was --kt-ground:#F5F2EA, --kt-teal-deep:#EFEAE0, background:#F5F2EA */ html body[data-concept="a"] :is(button,input,.mark,.concept-reader-head h2,.concept-record-id,.concept-scan-link,.concept-explain,.concept-drawer-guidance,.bar-nav a,.study-scroll-hint){font-family:"Manrope",sans-serif!important;font-synthesis:none;} html body[data-concept="a"] .site-bar{background:#5B6B76!important;border-color:#5B6B76!important;} /* RULED 2026-09-30 20:20:58 UTC "go with slate"; was #EFEAE0 and #E2DCCE */ html body[data-concept="a"] .mark{color:#17242E!important;font-size:23px!important;font-weight:700!important;letter-spacing:-.6px!important;} html body[data-concept="a"] .mark::after{display:none!important;} html body[data-concept="a"] .top{background:#E4E9EC!important;} /* RULED 2026-09-30 20:20:58 UTC "go with slate"; was #F5F2EA */ html body[data-concept="a"] #address{font-size:16px!important;color:#17242E!important;background:#fff!important;border-color:#D8DDE1!important;} html body[data-concept="a"] #address::placeholder{color:#5B6B76!important;opacity:1;} html body[data-concept="a"] :is(.switcher button,.concept-text-button,.concept-explain,.concept-scan-link,.bar-nav a){font-size:15px!important;font-weight:600!important;color:#17242E!important;} html body[data-concept="a"] .switcher button{background:#fff!important;} /* RULED 2026-09-30 20:20:58 UTC "go with slate", with his 2026-09-19 00:10:37 UTC "pushed buttons same dark beige as the WellReport logo background": a pushed key takes the bar, so on Slate the words go cream (C1's dark words were for a beige key). Was #EFEAE0 with #17242E. */ html body[data-concept="a"] .switcher button[aria-pressed="true"]{background:#5B6B76!important;color:#FFFFFF!important;} /* The card's two buttons ("Summary", "Selected well"): the pressed one's words white on its slate - RULED 2026-10-13 00:13:49 UTC, his words as typed: "When either circle or record selected , maybe make the text light not dark?", and 00:30:14 UTC "Yes to all" (phone and computer). His 2026-09-30 20:20:58 UTC "go with slate" never reached them: line 11 above paints every .concept-text-button's words dark with !important, and their own white (concepts.css) has none - dark on slate, 2.87 to 1; white 5.51 (measured 2026-10-13). knowledge/plans/desktop-look-2026-10-10.md, 5n. */ html body[data-concept="a"] .concept-reader-tabs button[aria-pressed="true"]{color:#FFFFFF!important;} html body[data-concept="a"] .concept-reader{background:#fff!important;border-color:#8A9AA5!important;} /* the record's outer edge, RULED 2026-09-30 20:20:58 UTC "go with slate"; was #E2DCCE. On a computer the card's edge was the light #D2D8DD from 2026-10-12 03:12:15 UTC (his words as typed: "I kinda like light border better") until 2026-10-15 - THE ONE CARD (11:43:18 UTC "A") gives the record card this slate on every screen; only the reading pages' card keeps the light edge (outer-detail.css) */ html body[data-concept="a"] .concept-reader-head{background:#5B6B76!important;} /* RULED 2026-09-30 20:20:58 UTC "go with slate"; was #EFEAE0 */ html body[data-concept="a"] .concept-reader .concept-reader-head *{color:#FFFFFF!important;} /* cream words on the Slate head - one class heavier than the :is() line above, which paints .concept-text-button (the head's "Expand") in the ink */ html body[data-concept="a"] .concept-reader-head h2,html body[data-concept="a"] .concept-record-id{font-size:16px!important;color:#FFFFFF!important;font-weight:600!important;} /* RULED 2026-09-30 20:20:58 UTC "go with slate"; was #17242E */ /* RULED 2026-09-30 14:11:05 UTC summary box lighter, rest darker: the panel's actions row and scroll hint take the record's darker paper #FAF6EB and its line #DCD7CA, so they read as one surface with the record; #F5F2EA was 1.42 from the map's land where the panel meets the map on a computer - the melt he rejected 2026-09-29 23:46:27 UTC. */ html body[data-concept="a"] .concept-report-actions{background:#E4E9EC!important;border-color:#D2D8DD!important;} /* RULED 2026-09-30 20:20:58 UTC "go with slate": the record's Slate page; was #FAF6EB (and #fff and #E2DCCE before that) */ html body[data-concept="a"] .concept-explain{border-color:#D8DDE1!important;background:#fff!important;} /* C6b: this layer forces the Explain button white with !important, so his R2 pushed look (beige inside, dark words - white cannot be read on beige) has to be written here too. */ html body[data-concept="a"] .concept-explain[aria-pressed="true"]{background:#5B6B76!important;color:#FFFFFF!important;} /* RULED 2026-09-30 20:20:58 UTC "go with slate": a pushed key is the bar; was #EFEAE0 with #17242E */ html body[data-concept="a"] .concept-explain[aria-pressed="true"] .concept-explain-pip{background:#FFFFFF!important;} html body[data-concept="a"] .concept-explain[aria-pressed="true"] .concept-explain-pip::after{background:#5B6B76!important;} /* on the dark key the switch's track goes cream and its knob takes the key's fill - the ten-set pictures' own rule */ html body[data-concept="a"] .study-scroll-hint{background:#E4E9EC!important;color:#5B6B76!important;border-color:#D2D8DD!important;font-size:14px!important;} /* RULED 2026-09-30 20:20:58 UTC "go with slate"; was #FAF6EB (and #F5F2EA and #E2DCCE before that) */ html body[data-concept="a"] .concept-report-actions{background:#E4E9EC!important}/* RULED 2026-09-30 20:20:58 UTC "go with slate"; was #FAF6EB, and #F5F2EA before */html body[data-concept="a"] .mark{font-weight:600!important;letter-spacing:-.3px!important} html body[data-concept="a"] .site-bar{background:#5B6B76!important;border-color:#5B6B76!important;color:#FFFFFF!important} /* RULED 2026-09-30 20:20:58 UTC "go with slate"; was #EFEAE0, #E2DCCE and #17242E */ html body[data-concept="a"] .site-bar *:not(.concept-menu):not(.concept-menu *){color:#FFFFFF!important} /* cream on the Slate bar; the menu opens on the light ground and keeps its ink. Was #17242E */ html body[data-concept="a"] .mark{font-weight:700!important;letter-spacing:-.6px!important} /* Carry the locked app typeface into chart labels with inherited explicit fonts. */ html body[data-concept="a"] :is(.x-axis,.bar-label,.bar-count,.bar-tick){font-family:"Manrope",sans-serif!important} html body[data-concept="a"] .concept-reader-head{border-bottom:1px solid #5B6B76!important} /* RULED 2026-09-30 20:20:58 UTC "go with slate"; was #E2DCCE */ html body[data-concept="a"] .switcher button[aria-pressed="true"]{background:#5B6B76!important;color:#FFFFFF!important} /* RULED 2026-09-30 20:20:58 UTC "go with slate"; was #EFEAE0 with #17242E */ /* The retired drag-handle padding exposed a different-colour strip above the reader header. Keep the existing clipped rounded corner continuous. */ html body[data-concept="a"] .concept-reader { padding-top: 0 !important; background: #FFFFFF !important; } html body[data-concept="a"] .concept-reader-content, html body[data-concept="a"] .concept-drawer-guidance { background: #FFFFFF !important; } /* PRINT ONLY - what a printer gets. Nothing here applies on screen: the softer Lake blue look is LOCKED (owner, 2026-09-15 04:16:32 UTC "yes lock it") and this block sits inside a print media query, so every screen pixel stays where it was. The go to fix the printed sheet is the owner's, 2026-09-15 15:45:01 UTC, on knowledge/reviews/codex-work-review-2026-09-15.md section 2 item 2 and section 3 item 7. Three defects, one block. 1. The map's keys printed as a tall column instead of the small row of keys under the map that the template's own print design asks for. (There were two of them when this was written, Satellite and Well records; the Well records key went on 2026-09-19 - owner, "i love option 1." - so the row is Satellite alone now. The rule below is unchanged by that.) Measured on the candidate before this block: 199 x 990 at 1920, 199 x 710 at 900, 191 x 411 at 390, against 163 x 46 on the production map. Mechanism: the template's print rule (templates/public/map_launch_styled.html, the switcher at top:auto; bottom:-48px) carries one class less weight than the overlay rules in static/launch/reader.css (line 29 pins the keys at top:12px for every concept, line 199 moves concept A's to top:74px), so the top edge survived while the bottom edge applied - and an absolutely positioned box with BOTH edges pinned and no height of its own stretches to fill its container, which here is the map. This block pins one edge only and gives the height back. Deliberately NOT set: border-radius, because the template's print design leaves the screen radius alone and the production map's 6px would change the locked look; and the button heights, because ending the stretch returns them to their screen size on its own - 44 px plus two borders from 760 px up, 36 plus two on a phone. 2. The ground printed tinted. The rule at the top of appearance-outer.css sets background:#F5F2EA with !important on this same selector, which defeats the template's own print rule (background:#FFFFFF). Paper is white. 3. Navigation words printed. The template's print block hides the site bar's nav, but static/launch/reader.js has already replaced that nav on this page, so the desktop nav, the menu button and the place label it builds instead all survived. Links do nothing on paper. The fourth word it builds, About the data, is left alone here - it was outside the reviewed defect. */ @media print { html body[data-concept="a"] { background: #FFFFFF !important; } /* THE LOGO ON PAPER. RULED 2026-10-02 00:20:39 UTC, as typed: "ok get rid of magnifying glass but leave blue b/w ll" - the name with the gap between its two l's three-quarters full of blue, drawn by tools/make_logo_files.py and put into this page by tools/cut_launch_map_parts.py. On screen it sits on the slate bar: white letters, water #6BB6EA (the fallbacks written on the drawing). Printed without background graphics - Chrome's default - the slate does not print, so white letters would vanish and the water float alone; on paper it takes the logo session's pair for white paper, the ink #17242E and the water #2F86D0. Custom properties, so the bar's white-words rule above never has to be fought. The blue is his exception to "no accent color", RULED 2026-10-02 00:53:55 UTC: "yes its an exception". [CLAUDE'S CALL: printing is parked by him; this only keeps the logo from breaking the sheet.] */ html body[data-concept="a"] .mark { --mark-ink: #17242E; --mark-water: #2F86D0; } html body[data-concept="a"] .switcher { top: auto !important; bottom: -48px !important; left: 0 !important; right: auto !important; width: auto !important; height: auto !important; flex-direction: row !important; box-shadow: none !important; } html body[data-concept="a"] .concept-desktop-nav, html body[data-concept="a"] .concept-menu-button, html body[data-concept="a"] .concept-desktop-data, html body[data-concept="a"] .concept-place-label { display: none !important; } /* On paper the drawer that teaches tapping ("Explore wells ... tap a well") teaches nothing, and once the map gives up 48 px for the key row (below) the licence line anchored to the map's bottom rose behind that drawer and was cut - a required attribution covered on the printed sheet (independent print check, 2026-09-15 16:2x UTC). So the drawer prints only when it holds something a reader can use: the chart of a placed circle or a selected well. */ html body[data-concept="a"]:not(.concept-has-chart):not(.concept-has-well) .concept-reader { display: none !important; } /* ADDITION beyond the three reviewed defects, measured into the block because without it the fix above prints NOTHING where the column used to be. From 760 px up, reader.css line 113 gives the map height:100%, so its bottom edge is the body's bottom edge - and this body is one screen tall with overflow:hidden (reader.css line 65). The row, parked 48 px below the map by the template's print design, then falls outside the sheet: measured on the sheet at 900 it sat at y 802 against a body bottom of 800, and at 1920 at y 1082 against 1080. Handing the height back to the flex stretch makes it honour the 48 px the template's print rule already reserves under the map, which is where the keys go. WHICH arrangement a sheet takes is not fixed, and the sentence that used to stand here - "every printed sheet is laid out at paper width - about 816 css px - so this desktop branch is the one a printer always takes, whatever screen the page was on" - was half wrong. Chrome lays a printed page out at the paper's CONTENT width, the paper less its margins, so it follows the margins, the orientation and the paper, not the window the page was printed from. Measured on real sheets, 2026-09-19 (output/step3-20260919/attack/paper/FINDINGS.txt): Letter portrait 739 css px with Chrome's default 0.4 in margins and 816 with margins "None"; A4 portrait 718 / 794; Letter landscape 979 / 1056; A4 landscape 1046 / 1123. The window does not enter into it: the same 1920 px window gives a phone sheet at Letter-default (739) and a computer sheet at Letter-none (816), both DRAWN 1224 px wide after Chrome's shrink-to-fit - the drawn width decides nothing. Under 760 px the sheet takes the PHONE arrangement, where the map never had that 100 % height (concepts.css hands it out only from 760 px up) - so this one line changes nothing on the 739 sheet he ruled on and everything on the wide ones. */ html body[data-concept="a"] #map { height: auto !important; } /* His ruling "B", 2026-09-19 14:41:40 UTC, on the sheet he was shown. Two of the map's own controls change on paper, and NOTHING here may read a key's box to do it: the key row leaves the map for the band under it (the rule above), so anything placed by measuring Satellite follows it off the sheet. Plain rules only. 1. The circle key moves up into the corner Satellite has left. On screen it sits under the white pill; on paper the pill is gone, so the corner is free and the key is where a reader's eye starts. 2. The zoom-in button's words stay ON the map, as plain words - without them a printed map with no dots reads as "no wells here". Its look comes off, because nothing on paper can be pressed, and the plus picture goes with it. They sit beside the circle key and level with it, which is the order the reader saw on screen: the key first, then the words. The 64 px is the key's own left edge (12) plus its width (44) plus 8 px of air - the same air that sits between Satellite and this button on screen. [CLAUDE'S CALL, not ruled: where on the map the words sit and how plain they look.] A sheet printed zoomed IN carries no words at all, and needs no rule for it: the button is already display:none at that zoom, because the map says the dots can draw. The two 12 px tops below are the NARROW sheet's answer only. Which corner Satellite leaves depends on the sheet's own width, and the block after this one carries the wide half. */ html body[data-concept="a"] #circle-btn { top: 12px !important; left: 12px !important; bottom: auto !important; } html body[data-concept="a"] .concept-zoom-button { top: 12px !important; left: 64px !important; height: 44px !important; padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; color: var(--kt-ink) !important; } html body[data-concept="a"] .concept-zoom-icon { display: none !important; } } /* The WIDE half of his ruling "B" - same ruling, the other kind of sheet. From 760 px up the page takes its computer arrangement: the search box leaves the row above the map and sits ON it, 12 to 58 px down at z-index 35 (concepts.css, the .top rule inside @media (min-width:760px)), and Satellite's white pill drops from 12 px down to 74. So on a wide sheet "the corner Satellite leaves" is 74 px down, not 12 - and anything printed at 12 prints under the search box instead. Measured on real sheets, 2026-09-19 (output/step3-20260919/attack/paper/): on an 816 px sheet only the letter "Z" of the ruled words survived, and with the reader panel open the circle key printed nowhere at all. 74 is not a new number: it is the pill's own top in this arrangement (reader.css, the .switcher rule inside @media (min-width:760px)) - the place the reader's eye already knows, which the print rule above then empties by sending the pill to the band under the map. Only the top moves. The left edges (12 for the key, 64 for the words), the plain look and the height are right on both kinds of sheet, so they stay above and are not repeated - and these two win over them by carrying the same weight from a later place in the file. Moving BOTH keeps the order he saw on screen, the key first and then the words, level with each other. */ @media print and (min-width: 760px) { html body[data-concept="a"] #circle-btn { top: 74px !important; } html body[data-concept="a"] .concept-zoom-button { top: 74px !important; } } /* ==== THE PHONE LOOK MADE CONSISTENT - knowledge/plans/phone-look-consistency-2026-10-01.md ==== His rulings on the walk, as typed (UTC, 2026-10-01): item 2 one corner family, 22:10:00 "keep"; item 3 every key 44 px, 22:11:33 "drop" (the old sizes come back); item 4 the keys on the map one look, 22:13:55 "keep"; item 5 the buttons inside a page one look, 22:16:16 "keep". Shapes change on the PHONE arrangement only (under 760 px) - the computer view gets its own pass when he moves to it. The values are CLAUDE'S calls, named in the plan's table: 12 px corners for every key, box and card; keys floating on the map are white with a 1 px #D3DBE0 edge and ONE shadow; buttons inside a page are white with a 1 px #8A9AA5 edge, no shadow, and the slate bar with white words when pressed. Every key keeps the size it had before the build. The map's own paint is never touched. */ @media screen and (max-width:759px), screen and (orientation:landscape) and (min-width:500px) and (max-height:500px) { /* --- the keys floating on the map: one look (item 4) --- */ html body[data-concept="a"] .switcher, html body[data-concept="a"] #circle-btn, html body[data-concept="a"] #circle-btn[aria-pressed="true"], html body[data-concept="a"] #circle-btn.pressed, html body[data-concept="a"] .maplibregl-ctrl.maplibregl-ctrl-group, html body[data-concept="a"] .concept-zoom-button { border:1px solid #D3DBE0 !important; border-radius:12px !important; box-shadow:0 1px 4px rgba(23,36,46,.16) !important; } html body[data-concept="a"] .switcher, html body[data-concept="a"] .maplibregl-ctrl.maplibregl-ctrl-group, html body[data-concept="a"] .concept-zoom-button { background:#FFFFFF !important; } html body[data-concept="a"] .maplibregl-ctrl-group button + button { border-top:1px solid #D3DBE0 !important; } /* the map's small "i" for its credits: its 24 px white disc is the credit box itself, which stays as it is; the key on top of it is 44 px, reaching 10 px past the disc on every side (into the 10 px margin the map keeps around it), see-through, with the same 24 px "i" painted in its middle. Kept inside item 3's "drop" (22:11:33 UTC): the advice he was given with it - this invisible tap area and the circle picture's (below) stay, because they hide no map. */ html body[data-concept="a"] .maplibregl-ctrl-attrib-button { width:44px !important; height:44px !important; top:-10px !important; right:-10px !important; border-radius:22px !important; background-color:transparent !important; background-size:24px 24px !important; background-position:center !important; background-repeat:no-repeat !important; } /* --- the search box: the same 12 px corners and the map keys' edge (items 2 and 4) --- */ html body[data-concept="a"] #address { border-radius:12px !important; border-color:#D3DBE0 !important; } html body[data-concept="a"] #search-btn { border-radius:12px !important; } html body[data-concept="a"] #suggest { border-radius:12px !important; } /* the circle picture inside the drawer's sentence: 10 px of invisible padding on every side makes it a 44 px key, and the same 10 px pulled back with a negative margin keeps the picture and the words around it exactly where they were. Kept inside item 3's "drop" (22:11:33 UTC), as the "i" above. */ html body[data-concept="a"] .concept-circle-icon { display:inline-block !important; padding:10px !important; margin:-10px !important; } /* --- buttons inside a page: one look (item 5) --- the Explain switch's half of these rules moved to the every-screen block right under this one, 2026-10-15 (the one-card build); the chart's keys stay the phone's here */ html body[data-concept="a"] #unit-toggle, html body[data-concept="a"] .plot-metrics { background:#FFFFFF !important; border:1px solid #8A9AA5 !important; border-radius:12px !important; box-shadow:none !important; color:#17242E !important; } html body[data-concept="a"] .plot-metrics { overflow:hidden; } html body[data-concept="a"] .plot-metrics button + button { border-left:1px solid #8A9AA5 !important; } html body[data-concept="a"] #unit-toggle[aria-pressed="true"], html body[data-concept="a"] .plot-metrics button[aria-pressed="true"] { background:#5B6B76 !important; color:#FFFFFF !important; } html body[data-concept="a"] .plot-metrics button[aria-pressed="false"], html body[data-concept="a"] .plot-metrics button:not([aria-pressed]) { background:#FFFFFF !important; color:#17242E !important; } } /* THE ONE CARD - the Explain switch's look on every screen (the one-card build, RULED 2026-10-15 11:43:18 UTC, his word as typed: "A"; knowledge/plans/one-card-2026-10-15.md, section 4): white with the slate edge and the family's 12 px corners, the slate bar with white words when pressed, the round pip. Lifted word for word out of the phone block above (item 5 of 2026-10-01). Screen only, never paper. */ @media screen { html body[data-concept="a"] .concept-explain { background:#FFFFFF !important; border:1px solid #8A9AA5 !important; border-radius:12px !important; box-shadow:none !important; color:#17242E !important; } html body[data-concept="a"] .concept-explain[aria-pressed="true"] { background:#5B6B76 !important; color:#FFFFFF !important; } /* the Explain switch inside the key is the one round thing (a switch is round by nature) */ html body[data-concept="a"] .concept-explain-pip { border-radius:999px !important; } } /* ITEM 2 - THE LAST KEY AND THE GRAB BAR, found by the inventory re-run of 2026-10-01 (item 2, RULED 22:10:00 UTC, his word as typed: "keep"; CLAUDE'S CALLS inside it). The x that closes the list of wells sharing one dot had a corner of its own (0 3px 0 0, the map library's); it takes the family's 12 px at its old size. The record's grab bar is fully round, as the switch is (it was 3 px on a 5 px bar, which already drew round). */ @media screen { /* the list's x corner on every screen since the one-card build (2026-10-15, RULED 11:43:18 UTC "A") - it was this phone block's; the grab bar below stays the phone's */ html body[data-concept="a"] .concept-well-slot .maplibregl-popup-close-button { border-radius:12px !important; } } @media screen and (max-width:759px), screen and (orientation:landscape) and (min-width:500px) and (max-height:500px) { html body[data-concept="a"] .concept-reader::before { border-radius:999px !important; } } /* THE PLUS AND MINUS KEYS - a bigger tap area that is not drawn. Item 3 RULED 2026-10-01 22:11:33 UTC, his word as typed: "drop" (knowledge/plans/phone-look-consistency-2026-10-01.md): the keys keep their old 29 px, and with the drop he was given this advice - an invisible tap area 8 px past their sides and their outer end only, so the two never overlap each other and the keys look and sit exactly as before (a key floating on the map hides the map under it; this area hides nothing). CLAUDE'S CALL, the 8 px, from tools/look_phone_revised_2026_10_01.py. */ @media screen and (max-width:759px), screen and (orientation:landscape) and (min-width:500px) and (max-height:500px) { html body[data-concept="a"] .maplibregl-ctrl-group button { position:relative; } html body[data-concept="a"] .maplibregl-ctrl-group button:first-child::after { content:""; position:absolute; left:-8px; right:-8px; top:-8px; bottom:0; } html body[data-concept="a"] .maplibregl-ctrl-group button:last-child::after { content:""; position:absolute; left:-8px; right:-8px; top:0; bottom:-8px; } } /* ==== THE NEW COMPUTER LOOK - knowledge/plans/desktop-look-2026-10-10.md (sections 4, 5c, 5d, 5e) ==== The third picture, built: TRANSCRIBED from its throwaway file (output/desktop-look-20261010/solution1/tools/ solution1_v5_inject.css), which was proven by being added LAST, after this file - so it stands here, at the end of the page's last stylesheet, and wins every tie the way it did there. His rulings, as typed (UTC): 2026-10-10 15:14:45 "Solution 1"; 16:40:11 the search box stays on the map and the words get sizes fit for a computer; 17:45:38 "A" (the chart and the record together - taken out 2026-10-13 00:30:14 UTC, his "Yes to all"); 2026-10-11 15:33:56 "i like option 2 as is" (the card over the map's right edge) and his items 1-6; 18:28:07 "coice 3" (the opening view - map.js, made by server.py); 18:44:30 "take 2, 3, 5, 6, drop 4, computer only"; 23:20:15 "Go" (this build). Every number is a [CLAUDE'S CALL] unless his words are quoted beside it. COMPUTER ONLY: 760 px and wider AND taller than 500 px, the page's own computer switch. A phone held sideways (500 px tall or less) never matches, so the phone, upright and sideways, is untouched. The page's script does the moves a stylesheet cannot (reader.js: THE NEW COMPUTER LOOK). Two things in the throwaway are NOT here, on purpose: the "?" key's and the help box's places (the page's own spot finder places them now, taught the computer's card and credit) and the fixed two-line room for the "don't report" line (its tallest height is measured). The card's light #D2D8DD edge was a third, left out as the throwaway's slip and built in his slate - until he picked the light one: RULED 2026-10-12 03:12:15 UTC, his words as typed: "I kinda like light border better" (shown both edges side by side on his monitor first). Computer only; the phone's card keeps the slate edge of appearance-outer.css. */ /* On paper the page's own footer carries the licence sentence and "Published by WellReport" (the print rules above), so the card's copy of them never prints - a sheet printed straight from a computer window, before the page's script can give the footer back its job, came out as two pages with it (the full run of 2026-10-12). */ @media print { html body[data-concept="a"] .concept-computer-foot { display:none !important; } } /* On paper the map's picture keeps its SCREEN size (knowledge/plans/map-prints-blank-2026-09-21.md: a real print puts it at the screen's size in the top-left of the paper's map space), and it hangs below the printed map's 500 px - over the key row and the footer, and on a sideways sheet onto a second, blank page. The new computer look's map fills the window, so it hangs further: from a 1280 x 900 window the picture is 835 px tall (was 640), and the A4 sideways sheet broke in two (the full run of 2026-10-12). Cut at the printed map's foot; its width is left alone, so a wide window's sheet is still fitted to the paper as before. Measured on page.pdf() sheets, six papers: one page each from 1280 x 900, 1366 x 768 and 1920 x 1080; from a 900 px window the two sideways papers print two pages, as the live page already did. */ @media print { html body[data-concept="a"] #map .maplibregl-canvas-container { position:absolute; top:0; left:0; height:100%; overflow-x:visible; overflow-y:clip; } } @media screen and (min-width:760px) and (min-height:501px) { /* ONE SCREEN: the page no longer scrolls; the bar, then the map block filling the rest */ html body[data-concept="a"] { height:100vh !important; min-height:0 !important; overflow:hidden !important; display:flex !important; flex-direction:column !important; } html body[data-concept="a"] .site-bar { flex:none !important; } /* THE BAR holds the wordmark and the five page links - the search box is NOT in it (his 16:40:11 UTC ruling): reader.js puts the box on the map on a computer, at the page's own approved place (top 12, centred), and nothing here moves it or the keys under it. FIX 3 ("take ... 3"): the bar's word "Ontario" off on the computer. */ html body[data-concept="a"] .concept-place-label { display:none !important; } /* THE WORDS STRIP (the page name and its sentence) leaves the screen - the change to his 2026-09-15 11:18:30 UTC ruling (a) his "Solution 1" took with it. CLIPPED, not removed: the strip stays in the page at one pixel, the phone's own clip, so a screen reader and Google keep the page's main heading. */ html body[data-concept="a"] .top { position:absolute !important; width:1px !important; height:1px !important; padding:0 !important; margin:-1px !important; overflow:hidden !important; clip:rect(0,0,0,0) !important; white-space:nowrap !important; border:0 !important; } /* THE MAP BLOCK fills the window under the bar; the map takes the WHOLE width; the card lies over its right edge. The card's width is worked out in two more places, which must change with it: reader.js (the map's padding) and server.py (the opening view, before the card is built). */ html body[data-concept="a"] { --concept-card:clamp(400px, 29vw, 560px); } html body[data-concept="a"] .map-block { flex:1 1 auto !important; min-height:0 !important; height:auto !important; display:flex !important; flex-direction:row !important; position:relative !important; } html body[data-concept="a"] #map { flex:1 1 auto !important; min-width:0 !important; height:auto !important; min-height:0 !important; } /* THE CARD over the map's right edge, the same box in every state (option 2, his 15:33:56 UTC "as is"). Its shape is the page's own at-rest card (concepts.css, the computer's .concept-empty rule: 12 px corners, its shadow), moved from the bottom right to the TOP right under the bar, so the record and the chart grow DOWN from where the two sentences stand. Its edge is the phone's slate #8A9AA5 (2026-09-30 20:20:58 UTC "go with slate") - THE ONE CARD, RULED 2026-10-15 10:34:07 UTC, his words as typed: "i mean what if you simply use exact copy of the mobile card, nothing changed?" and 11:43:18 UTC "A" (knowledge/plans/one-card-2026-10-15.md). The light #D2D8DD of his 2026-10-12 03:12:15 UTC ruling ("I kinda like light border better") is WITHDRAWN for the record card by that one; it stays on the reading pages' card (the .concept-reading rule below), whose look he ruled on 13 - 14 October. Width: about 557 on a 1920 screen, 400 from 1379 down. */ html body[data-concept="a"] .concept-reader, html body[data-concept="a"].concept-empty .concept-reader, html body[data-concept="a"].concept-expanded .concept-reader, html body[data-concept="a"].concept-full-report .concept-reader, html body[data-concept="a"].concept-expanded.concept-full-report .concept-reader { position:absolute !important; top:12px !important; right:16px !important; bottom:auto !important; left:auto !important; width:var(--concept-card) !important; height:auto !important; max-height:calc(100% - 24px) !important; margin:0 !important; padding:0 !important; border:1px solid #8A9AA5 !important; border-radius:12px !important; box-shadow:0 2px 12px #17242e14, 0 6px 20px rgba(23,36,46,.18) !important; display:flex !important; flex-direction:column !important; background:#FFFFFF !important; overflow:hidden !important; z-index:10 !important; } /* a well: the card takes the full height (top 12 to bottom 12), the record scrolling inside its own frame */ html body[data-concept="a"].concept-full-report .concept-reader, html body[data-concept="a"].concept-expanded.concept-full-report .concept-reader { bottom:12px !important; } html body[data-concept="a"]:not(.concept-empty) .concept-reader-content { flex:1 1 auto !important; min-height:0 !important; } html body[data-concept="a"]:not(.concept-empty):not(.concept-full-report) .concept-reader-content { overflow:auto !important; } /* at rest: the heading row, the two sentences, the foot line - and nothing stretched */ html body[data-concept="a"].concept-empty .concept-reader-head { min-height:48px !important; border-bottom:1px solid #D8DDE1 !important; } html body[data-concept="a"].concept-empty .concept-drawer-guidance { padding:12px 20px !important; } html body[data-concept="a"].concept-empty .concept-reader-content { flex:0 0 auto !important; } /* WHAT THE CARD WOULD COVER stands in the open part of the map instead, in every state so nothing jumps between states: the search box centres in the strip left of the card and the + and - keys (the box ends 68 px before the card: 16 for the card's margin, 10 for the keys' margin, 30 for the keys, 12 of air); the + and - keys stand 16 px left of the card. */ html body[data-concept="a"] #map .search-block { right:calc(var(--concept-card) + 68px) !important; } html body[data-concept="a"] .maplibregl-ctrl-top-right, html body[data-concept="a"] .maplibregl-ctrl-bottom-right { right:calc(var(--concept-card) + 16px) !important; } /* THE FOOT LINE inside the card in every state - the change to the small foot line ruling (b) his "Solution 1" took with it; the promise line and the page's foot leave the screen. FIX 6 ("take ... 6"): two lines, the licence sentence, then "Published by WellReport ยท Browse by county" (reader.js builds it; the middle dot is a call). */ html body[data-concept="a"] .map-foot, html body[data-concept="a"] .site-foot { display:none !important; } html body[data-concept="a"] .concept-computer-foot { flex:none; margin-top:auto; padding:8px 20px 10px; border-top:1px solid #D8DDE1; font-size:13px; line-height:1.5; color:#5B6B76; background:#FFFFFF; } html body[data-concept="a"] .concept-computer-foot p { margin:0; max-width:none; font-size:13px; } html body[data-concept="a"] .concept-computer-foot a { color:inherit; } html body[data-concept="a"] .concept-computer-foot .concept-computer-foot-two { margin:2px 0 0 !important; } /* The third line, "Browse by county" alone at 10 px with no underline at rest - RULED 2026-10-14 00:32:22 UTC ("sure B") and 00:36:36 UTC ("yes" to removing the underline); the underline comes back under the mouse and for a keyboard reader. reader.js builds the line. */ html body[data-concept="a"] .concept-computer-foot .concept-computer-foot-three { margin:2px 0 0 !important; font-size:10px; } html body[data-concept="a"] .concept-computer-foot .concept-computer-foot-three a { text-decoration:none; text-underline-offset:3px; } html body[data-concept="a"] .concept-computer-foot .concept-computer-foot-three a:hover, html body[data-concept="a"] .concept-computer-foot .concept-computer-foot-three a:focus-visible { text-decoration:underline; } /* THE READING PAGES IN THE CARD (knowledge/plans/reading-pages-in-the-card-2026-10-14.md). RULED 2026-10-13 19:52:32 UTC, his words as typed: "I like choice 1 for read pages"; the 520 px card on windows narrower than about 1,380 px (23:18:17 UTC "yes"; the rule's form clamp(520px, 29vw, 560px) is CLAUDE'S CALL C4 - today's card from about 1,793 px); "Close" (20:03:51 UTC) [WITHDRAWN 2026-10-15 20:49:19 UTC, his word "X" - the close is the x, the one shell below]. The page rides in its own frame over the card's content, which keeps its place underneath (C1); the frame stays hidden until the page and its fonts have arrived (C9). reader.js runs it. */ html body[data-concept="a"].concept-reading { --concept-card:clamp(520px, 29vw, 560px); } /* C14 - RULED 2026-10-14 15:27:35 UTC, his word as typed: "Go" (to "take the 400 card" on the upright iPad): under 900 px of window the reading page keeps the well's own card, 400 - measured at 768 the 520 card left 216 px of map, the search box 164 px wide and "Zoom in to see wells" cut mid-word; the 400 card there he accepted 2026-10-12. */ @media (max-width:899px) { html body[data-concept="a"].concept-reading { --concept-card:clamp(400px, 29vw, 560px); } } html body[data-concept="a"].concept-reading .concept-reader { bottom:12px !important; } /* ONE SHELL - RULED 2026-10-15 20:49:19 UTC, his words as typed: "X but I then it would close both summary and selected well cards if they are both open?" (one-card plan section 17): the reading card wears the well's card's shell - the slate edge, the 14 px side room, the 1 px slate line and the 16 px heading words of the every-screen rules, and the x in the heading's row (concepts.js; its look in concepts.css, the one-card block, shared with the well's x). Until then four rules here kept the light edge of his 2026-10-12 03:12:15 UTC ruling on this card alone, a 20 px room with room kept at the right for a floating "Close" key, that key's own rules, and 18 px words (R2 "Close", 2026-10-13 20:03:51 UTC - withdrawn beside its line in the reading-pages plan). */ /* The record's x is not seen while a reading page lies over the record - the page's own x is the way out (knowledge/plans/reading-pages-in-the-card-2026-10-14.md, C1). */ html body[data-concept="a"].concept-reading :is(.concept-report-close, .concept-circle-close) { display:none !important; } /* the circle's x too, 2026-10-16 (section 21) */ html body[data-concept="a"].concept-reading .concept-drawer-guidance, html body[data-concept="a"].concept-reading .concept-reader-content, html body[data-concept="a"].concept-reading .concept-report { display:none !important; } html body[data-concept="a"] .concept-reading-frame { flex:1 1 auto; min-height:0; height:0; width:100%; border:0; display:block; background:#FFFFFF; } /* see-through as well as hidden while it waits, as the record's frame (2026-10-18): Chrome counts the moves inside a frame that is only visibility:hidden - 0.053 on the guide on a computer - and skips them under a see-through ancestor. knowledge/plans/record-moment-2026-10-18.md */ html body[data-concept="a"] .concept-reading-frame:not([data-launch-ready="true"]) { visibility:hidden; opacity:0; } html body[data-concept="a"]:not(.concept-reading) .concept-reading-frame { display:none !important; } html body[data-concept="a"] .concept-reading-close[hidden] { display:none !important; } /* The keyboard lands on the x as a page opens (C6). Until 2026-10-16 a white keyboard ring stood here, 3 px inside the key (the house ring is dark ink and drew as a black box on the dark heading, seen 2026-10-14) - WITHDRAWN, RULED 2026-10-15 23:12:13 UTC "Why do we need keyboard ring? Just an x.", 2026-10-16 00:02:42 "No white ring", 00:03:08 "All cli white if on dark background", 00:03:39 "All x": no keyboard ring on any x in the dark heading. The rule that takes the ring off both x keys sits in concepts.css beside the two earlier no-ring rulings. */ /* TEXT SIZES FOR A COMPUTER - his 16:40:11 UTC ruling ("make sure that the text has appropriate font sizes for desktop version"); each number a call, measured first at 1920 (the sizes before are in the comments). The page's OWN words only: the record inside the frame keeps its ruled reading ladder (the well page's own file, record.css). */ html body[data-concept="a"] .concept-desktop-nav a { font-size:16px !important; } /* was 14 */ /* .concept-reading .concept-reader-head h2 { font-size:18px } stood here from the one-card build until the one shell (RULED 2026-10-15 20:49:19 UTC "X"): the reading card's heading now takes the 16 of appearance-outer.css too. */ html body[data-concept="a"] .concept-drawer-guidance { font-size:17px !important; line-height:1.5 !important; } /* was 16 */ html body[data-concept="a"] .concept-drawer-guidance.concept-tap-bar { font-size:16px !important; } /* was 15 */ /* .concept-report-actions a { font-size:14px } stood here until 2026-10-15 - the one-card build: the row's PDF link takes the phone's 16 (study.js, the reader's every-screen block). */ html body[data-concept="a"] .plot-axis-label { font-size:15px !important; } /* was 14 */ html body[data-concept="a"] .plot-metrics button { font-size:14px !important; } /* was 13 */ html body[data-concept="a"] .bar-count, html body[data-concept="a"] .xt { font-size:13px !important; } /* was 12 */ /* HIS ITEM 2 - "with so much space available maynebe make search line longer ?" The box grows with the open strip: about two thirds of it, never under the 620 he approved, never over 800: 800 at 1920 wide, 663 at 1600, 620 at 1366; at 900 the strip itself is narrower than 620, unchanged. */ html body[data-concept="a"] #map .search-block { max-width:clamp(620px, calc((100vw - var(--concept-card) - 100px) * 0.64), 800px) !important; } /* HIS ITEM 4 - "the question icon maybe should be below the circle and the popup card should be larger." The places are the page's own spot finder's (reader.js, placeLegend): the "?" key 6 px under the crossed-circle key, the help box at the map's lower left (his ruled first spot, 2026-10-06 14:00:25 UTC) 6 px above the taller of the distance ruler and the credit's opened words. The larger box: words 17 (was 15), drawings 24 (was 20), padding 12 x 16 (was 9 x 12), rows 8 apart (was 6). */ html body[data-concept="a"].has-circle .concept-legend { gap:8px !important; padding:12px 16px !important; font-size:17px !important; line-height:24px !important; } html body[data-concept="a"] .concept-legend-words { font-size:17px !important; } /* was 14 */ html body[data-concept="a"] .concept-legend-row { gap:12px !important; } html body[data-concept="a"] .concept-legend-row svg { width:24px !important; height:24px !important; } /* HIS ITEM 5 - "the i for info should always be lower left and change position of it would be covered by a card." reader.js moves the map's credit (i) into the lower-left corner, right of the distance ruler, where no card ever lies; it unfolds rightwards along the bottom. The corner is a row (the ruler, then the credit) that stops 32 px short of the card, so the unfolded words wrap instead of running under it. */ html body[data-concept="a"] .maplibregl-ctrl-bottom-left { display:flex !important; align-items:flex-end !important; max-width:calc(100% - var(--concept-card) - 48px) !important; } html body[data-concept="a"] .maplibregl-ctrl-bottom-left > .maplibregl-ctrl-attrib { flex:0 1 auto !important; min-width:0 !important; } /* the ruler NEVER shrinks: its length is the distance it names (found on the throwaway's first shots: at 900 the opened credit squeezed it from 58 to 32 px under "200 m") */ html body[data-concept="a"] .maplibregl-ctrl-bottom-left > .maplibregl-ctrl-scale { flex:none !important; } /* HIS ITEM 6 - "in histogram card, what if yyy records dont report xxx be the first thing under the header of histogram, centered and a bit larger font." COMPUTER ONLY (RULED 18:44:30 UTC). reader.js moves the line out of the chart to straight under the card's dark heading, above "Click a bar"; the chart's own code keeps writing to it. 16 px (was 14 on the computer), centred, the quiet grey. Its row keeps one line's room when every record reports (the line is then empty, as Year Drilled often is), and the room of the tallest of the four measures' lines, which the chart's own one-height lock measures (map.js, made by server.py: --line-tallest) - so the chart never jumps between the four measures. Shown only while the chart shows. */ html body[data-concept="a"] .concept-reader > #plot-completeness { flex:none !important; margin:0 !important; padding:12px 20px 0 !important; text-align:center !important; font-size:16px !important; line-height:24px !important; min-height:max(36px, var(--line-tallest, 0px)) !important; color:#5B6B76 !important; box-sizing:border-box !important; } html body[data-concept="a"]:not(.concept-has-chart) .concept-reader > #plot-completeness, html body[data-concept="a"].concept-view-well .concept-reader > #plot-completeness { display:none !important; } /* FIX 5 ("take ... 5") - a taller chart on a computer. The bars' height grows with the window's height: 185 (the computer's height before) at a window 885 tall or less, 300 at most, 100vh - 700 between - so 300 at 1080, 245 at his full-screen window (945 measured), 185 at 768 and 640, where the card would otherwise outgrow the map. (A's smaller 125 with the record under it went with A, 2026-10-13 - his "Yes to all"; the chart now always stands alone.) */ html body[data-concept="a"] { --bars-h:clamp(185px, calc(100vh - 700px), 300px) !important; } /* THE RECORD'S ROW AND ITS LINKS - WITHDRAWN 2026-10-15 by the one-card ruling (10:34:07 UTC "i mean what if you simply use exact copy of the mobile card, nothing changed?", 11:05:37 "x", 11:43:18 "A"; knowledge/plans/one-card-2026-10-15.md, section 1). Until today six rules stood here: - FIX 2 ("take 2", 2026-10-11 18:44:30 UTC): "Open full page" and "Dismiss" left their own row and stood in the card's dark heading, at its right, white (the row laid over the heading, absolute, at the heading's measured height; the links white; the heading's right padding set to the links' measured width); - "Open full page" LEAVES the computer's card - RULED 2026-10-12 08:50:33 UTC, his word as typed: "Ok" (to "Go on building B, with 'Open full page' removed on a computer?"); built with the frame on his "1- go" (10:08:26 UTC). On a computer the well page's own address opens this same view, so the link would open the card again. STILL TRUE: the phone's rule that hides it (concepts.css, now the every-screen block) hides it on every screen; - the "Original record (PDF)" link BACK in the computer's card - RULED 2026-10-12 22:40:00 UTC, his words as typed: "so i like it how the link to the priginal record pdf is located" - in the dark heading, left of "Dismiss" (found on his question 19:14:51 UTC, "Where did link to pdf in desktop version go?": the frame build had taken the computer's only way to the scan - knowledge/plans/desktop-look-2026-10-10.md, 5m), and "Dismiss" after it. STILL THERE, now the phone's way: the link at the left of the row under the heading, the Explain switch at the row's right, the x alone in the heading (concepts.css, the every-screen block; concepts.js makes the x). Today's rules: none here - the card is written once, in the phone's rules, for every screen. */ /* A (RULED 2026-10-10 17:45:38 UTC "A": the chart and the record together on a window 880 px tall or more) stood here until 2026-10-13 - taken out, RULED 00:30:14 UTC, his words as typed: "Yes to all" (knowledge/plans/ desktop-look-2026-10-10.md 5n). Every computer window keeps the two buttons, one view at a time. */ }