/* Generated by tools/cut_launch_map_parts.py from locked review sources; do not hand-edit. */ /* 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. */ /* Three structural explorations. The live map stylesheet still owns the actual data graphics. */ body[data-concept] { color: var(--kt-ink); --concept-paper:#FFFFFF; } body[data-concept] .wrap { max-width:none; padding-left:16px; padding-right:16px; } body[data-concept] .site-bar { position:relative; z-index:30; } body[data-concept] .bar-in { min-height:54px; justify-content:flex-start; gap:12px; } body[data-concept] .mark { font-size:19px; } .concept-place-label { margin-left:auto; font-size:12px; color:var(--kt-slate); } /* HIS SLOGAN, top right on the phone (RULED 2026-09-15 12:16:42 UTC). The auto margin is what "top right" means in a bar laid out from the left: it eats the leftover room, so the slogan ends hard against the bar's own content edge whatever the phone is. flex:none and nowrap keep it one line - a flex item shrinks to its narrowest word by default, and a wrapped slogan would grow the bar and push the map down a screen he approved. THE COLOUR, corrected 2026-09-20 after it was measured on the running page: this rule asks for the quiet grey, and it does NOT get it. The locked appearance layer paints every word inside the top bar the dark text colour (`appearance-outer.css` .site-bar), which beats this line, so the slogan draws in the bar's dark ink - exactly what the place word beside it draws in, and what the wordmark draws in. The INTENT still holds by other means: at 12 px regular against a 23 px bold wordmark it reads as fine print. The token is left here on purpose, not deleted: it is the honest request, and the warm no-accent build of 2026-09-20 took that dark to #17242E, so the slogan followed the bar and needs no work of its own. */ /* 13 px - RULED 2026-10-04 22:43:51 UTC, his word as typed: "13" (his 22:35:14 UTC "Slogan seems small on mobile"; his 2026-10-01 "drop" of the 12 -> 13 step and his 2026-10-02 01:02:03 UTC "leave as is" were read back to him first, with the fit at 390 / 375 / 360 / 344). Was 12 px. At 13 px the slogan draws 145.2 px and stands 12.8 px from the name on a 344 px phone (12 is the gap it must keep), so the hide point below stays at 343 (measured, knowledge/plans/slogan-13-2026-10-04.md). */ /* 14 px - RULED 2026-10-05, his words as typed: "Slogan can be 14" (his iPhone look at 13; the hour is in knowledge/plans/slogan-13-2026-10-04.md). His 2026-10-04 "13" is REPLACED. At 14 px it no longer fits a 344 px phone, so under his 2026-09-20 rule ("For those phones where doesn't fit then don't show slogan") the hide point below moves from 343 to 354 (measured in that plan). */ .concept-slogan { flex:none; margin-left:auto; font-size:14px; color:var(--kt-slate); white-space:nowrap; } /* RULED 2026-09-20 16:07:49 UTC, owner, as typed: "For those phones where doesn't fit then don't show slogan". So there is ONE size - the bar's own 12 px - and on a phone too narrow to hold it the slogan is simply not there. It replaces Claude's earlier call of a smaller 10 px type on narrow phones, which he saw and overruled. WHERE IT STOPS FITTING, measured, never guessed (tools/measure_slogan_fit.py): at 12 px the slogan draws 136.11 px wide. The parts to its left are fixed - the bar's 10 px of padding, a 36 px three-lines key, two 12 px gaps and a 118.02 px wordmark - so it needs a 334.11 px bar. It clears 344 px by 9.87 px and runs 14.13 px over a 320 px phone. 344 is also the width his own short zoom words switch at ("what if zoom in for wells? for those sizes only", 2026-09-19 12:30:16 UTC), measured the same way. CHANGED 2026-10-02 01:02:03 UTC, his words as typed: "remove dot after clear and yes leave as is" - the slogan lost its full stop and now draws 134.03 px, so it needs a 332.03 px bar and clears 344 by 11.95 px. The width below is LEFT where it was: the slogan only got shorter, and the logo that came the same night adds no width (the name's box is 118.00 px, against 118.02 for the words). */ @media (max-width:354px) { .concept-slogan { display:none; } } /* Claude's call, NOT his ruling, and a defect this build made before it was caught: the slogan is SCREEN furniture and does not print. Measured on real printed sheets, never assumed - the everyday upright sheet is laid out at 739 px and takes the phone arrangement, so without this rule it carried the slogan, while a sideways sheet at 816 px did not (the computer hide is a plain width rule with no "screen" keyword, so paper obeys it too). One page printing two different ways depending on how it is held is the fault, whichever way it is settled. Settled the quiet way because his ruling names the "mobile version", which is a screen, and the sheet already says who published it twice - the licence credit line and "Published by WellReport". Print is a first-class layout here (his 2026-08-13 ruling), so this is his to overturn. */ @media print { .concept-slogan { display:none; } } .concept-menu-button { width:36px; height:44px; display:grid; place-items:center; padding:6px; border:0; background:transparent; color:var(--kt-ink); cursor:pointer; } .concept-menu-button svg { width:23px; height:23px; fill:none; stroke:currentColor; stroke-width:1.8; } .concept-text-button { min-height:40px; padding:6px 10px; background:transparent; border:0; color:var(--kt-teal); font:600 13px/1.3 var(--kt-sans); cursor:pointer; } .concept-menu { position:fixed; inset:0 auto 0 0; margin:0; padding:20px 24px; height:100%; max-height:none; width:min(280px, calc(100vw - 56px)); max-width:none; border:0; border-right:1px solid var(--kt-line); background:var(--kt-ground); color:var(--kt-ink); } .concept-menu::backdrop { background:rgba(23,36,46,.3); } .concept-menu-head { display:flex; align-items:center; justify-content:space-between; padding-bottom:18px; border-bottom:3px solid rgba(139,105,20,.45); } .concept-menu-head strong { font-size:20px; } /* RULED 2026-10-02 13:24:25 UTC, the heading is the logo. Its water is the top bar logo's own blue #6BB6EA - RULED 2026-10-02 16:48:37 UTC, as typed: "Can you make blue in logo under three lines exactly same as in page logo?" (it overturns CLAUDE'S CALL of 13:24 UTC, the paper blue #2F86D0). */ .concept-menu-head strong { --mark-water:#6BB6EA; } .concept-menu-links { margin-top:14px; } .concept-menu-links a, .concept-menu-row { display:flex; justify-content:space-between; align-items:center; min-height:48px; gap:16px; border-bottom:1px solid var(--kt-line); font-size:15px; } .concept-menu-links a { color:var(--kt-teal); text-decoration:none; font-weight:600; } .concept-menu-row small { font-size:11px; color:var(--kt-slate); white-space:nowrap; } .concept-menu-note { margin-top:28px; font-size:13px; color:var(--kt-slate); } .concept-menu .foot-licence { font-size:12px; } .concept-sr-heading { 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; } body[data-concept] .top { position:relative; z-index:25; } body[data-concept] #address { min-width:0; border-color:#B4BEC6; border-radius:4px 0 0 4px; padding:11px 12px; font-size:15px; } body[data-concept] .search-wrap { min-width:0; } body[data-concept] .searchbar { gap:0; } body[data-concept] #search-btn { border-radius:0 4px 4px 0; padding:10px 14px; } body[data-concept] #map { background:#E2E7E9; } body[data-concept] .switcher { top:12px; left:12px; border-color:#B4BEC6; box-shadow:0 1px 4px #17242e18; } body[data-concept] .switcher button { font-size:12px; } body[data-concept] #status { padding:10px 14px; font-size:13px; line-height:1.45; border-color:var(--kt-line); } body[data-concept] #plot { width:100%; max-width:none; min-height:0; margin:0; padding:8px 14px 12px; } body[data-concept] #plot[hidden] { display:none!important; } /* ONE height for the chart, whichever measure shows (asked 2026-10-03 03:47:23 UTC, his words as typed: "When switching between depth, flow, etc histogram window height slightly moves in height but noticeable when switching between them. Can you fix it?"). The map code draws all four charts in one go and leaves the tallest here; without it the phone drawer, and the map above it, grew and shrank by up to 52 px. CLAUDE'S CALL: a shorter chart's spare room is blank space under its last line. */ body[data-concept="a"] #plot { min-height:var(--plot-tallest, 0px); } /* The credits' room on the left: 100 px since 2026-09-21 (was 76, sized for the old 44 px circle key in that corner). Opened - the first five seconds, after a tap on the (i), always on paper - the strip must never lie on the distance scale, whose longest bar ends 93.7 px in (plan knowledge/plans/map-scale-2026-09-21.md, S-8; tools/measure_scale_fit.py). */ body[data-concept] .maplibregl-ctrl-bottom-right { max-width:calc(100% - 100px); } body[data-concept] .plot-row { position:static; margin:0 0 8px; padding:0; border:0; } body[data-concept] .plot-metrics { display:flex; width:100%; } body[data-concept] .plot-metrics button { flex:1; white-space:nowrap; padding:8px 5px; font-size:12px; } body[data-concept] #plot-completeness { font-size:13px; } .concept-reader { background:var(--concept-paper); min-width:0; min-height:0; border-top:1px solid var(--kt-line); } .concept-reader-head { min-height:48px; padding:0 14px; display:flex; align-items:center; justify-content:space-between; gap:8px; border-bottom:1px solid var(--kt-line); } .concept-reader-head h2 { font-size:16px; font-weight:600; margin:0; line-height:1.3; } .concept-reader-content { min-height:0; overflow:auto; overscroll-behavior:contain; } .concept-reader-tabs { display:flex; gap:6px; padding:4px 14px; border-bottom:1px solid var(--kt-line); } .concept-reader-tabs[hidden] { display:none!important; } .concept-reader-tabs button[aria-pressed=true] { color:var(--kt-ink); border-bottom:2px solid var(--kt-seam); } .concept-workspace-intro { font-size:16px; line-height:1.55; margin:20px 18px 12px; max-width:30em; } .concept-has-chart .concept-workspace-intro, .concept-has-well .concept-workspace-intro { display:none; } .concept-well-slot:empty { display:none; } .concept-well-slot .maplibregl-popup { position:relative!important; transform:none!important; max-width:none!important; width:100%; display:block; } .concept-well-slot .maplibregl-popup-tip { display:none; } .concept-well-slot .maplibregl-popup-content { background:transparent; box-shadow:none; border-radius:0; padding:16px 18px; width:100%; } .concept-well-slot .maplibregl-popup-close-button { top:7px; right:9px; width:38px; height:38px; font-size:25px; color:var(--kt-slate); } .concept-well-slot .well-popup { max-height:none!important; min-width:0; overflow:visible; font:14px/1.55 var(--kt-sans); } .concept-well-slot .popup-head { font-size:18px; margin:0 30px 10px 0; } .concept-well-slot .card-line { padding:5px 0; font-size:13px; border-bottom:1px solid var(--kt-line-soft); } .concept-well-slot .card-foot { font-size:12px; margin-top:12px; line-height:1.5; } .concept-well-slot .card-links { margin-top:14px; display:flex; gap:6px 20px; flex-wrap:wrap; } .concept-well-slot .card-links a { display:block; min-height:36px; padding:5px 0; } .concept-well-slot .popup-record-btn, .concept-well-slot .popup-back { min-height:44px; font-size:14px; } body[data-concept]:not(.concept-view-well) .concept-well-slot { display:none; } body.concept-view-well .concept-reader #plot { display:none; } /* Loud runtime status remains visible in either tab, including error and loading messages. */ /* A: a map-led canvas with a drawer; its closed state gives the room back to the map. */ body[data-concept="a"], body[data-concept="b"] { height:100vh; height:100dvh; overflow:hidden; display:flex; flex-direction:column; } body[data-concept="a"].drawing:not(.has-circle) #status, body[data-concept="b"].drawing:not(.has-circle) #status { padding-bottom:10px; } body[data-concept="a"] .top, body[data-concept="b"] .top { flex:none; width:100%; padding-top:8px; padding-bottom:10px; } body[data-concept="a"] .search-block, body[data-concept="b"] .search-block { max-width:none; margin:0; } body[data-concept="a"] .map-block { flex:1; min-height:0; display:flex; flex-direction:column; } body[data-concept="a"] #map { flex:1; min-height:170px; height:auto; position:relative; top:auto; z-index:0; } body[data-concept="a"] .concept-reader { flex:none; position:relative; z-index:10; border-radius:16px 16px 0 0; box-shadow:0 -5px 18px #17242e0b; margin-top:-12px; padding-top:4px; height:118px; display:flex; flex-direction:column; overflow:hidden; } body[data-concept="a"] .concept-reader::before { content:""; width:30px; height:3px; border-radius:2px; background:#B4BEC6; align-self:center; margin:3px 0 0; } body[data-concept="a"] .concept-reader-head { flex:none; min-height:44px; border-bottom:0; } body[data-concept="a"] .concept-reader-content { flex:1; } body[data-concept="a"] .concept-drawer-guidance { flex:none; margin:0; padding:0 14px 12px; color:var(--kt-slate); font:13px/1.5 var(--kt-sans); } body[data-concept="a"] .concept-circle-instruction { white-space:nowrap; } body[data-concept="a"] .concept-intro-action { display:block; margin-bottom:6px; } body[data-concept="a"] .concept-circle-instruction svg { display:inline-block; width:24px; height:24px; vertical-align:middle; color:var(--kt-teal); } /* RULED 2026-09-19 12:37:53 UTC: the picture in this sentence IS the circle key, so it is a real button now - and a real button brings a browser's own chrome with it (a border, a ground, its own padding and type) which would push the sentence about and change where it wraps. Every one of those is handed back here, so the sentence measures exactly as it did while the picture was only a picture: four lines, and "tapping [picture]" 84.2 px wide on one of them. */ body[data-concept="a"] .concept-circle-icon { display:inline; margin:0; padding:0; border:0; background:none; color:inherit; font:inherit; vertical-align:baseline; cursor:pointer; } body[data-concept="a"]:not(.concept-expanded) .concept-reader-content { overflow:hidden; visibility:hidden; } body[data-concept="a"] .concept-workspace-intro { display:none; } body[data-concept="a"].concept-expanded .concept-reader { height:min(410px,calc(100dvh - 274px)); } /* THE DARK RING ROUND A TAPPED WELL - RULED 2026-09-29 13:53:19 UTC, his words as typed: "Ok tighten it" - to the side-by-side page https://claude.ai/artifact/R3ZW7ea8bDRcJ8UdoWsrgi: 20 across with a 14 hole (it was 24 with an 18 hole, the size of the old 18-across dot; the dots are 13 across since knowledge/plans/smaller-dots-2026-09-29.md). The same 3 border, colour and white edge. The two sizes are COPIED from the tool that painted what he looked at (output/ring-sample-20260929/shoot.py, its TIGHT line), never re-typed. The box counts its border, so 20 - 2 x 3 = a 14 hole; 14 rather than 13 is Claude's call (the border never sits on the dot's white edge). knowledge/plans/ring-and-sideways-glide-2026-09-29.md */ body[data-concept="a"] .concept-selected-point { width:20px; height:20px; border:3px solid var(--kt-ink); border-radius:50%; background:transparent; box-shadow:0 0 0 3px #FFFFFF, 0 1px 7px #17242e55; pointer-events:none; } body[data-concept="a"] { --bars-h:125px; } body[data-concept="a"] .maplibregl-ctrl-bottom-right { bottom:12px; } /* The distance scale's corner takes the same 12 px lift, at every width and on paper: on a phone the drawer rides 12 px up over the map and would cover the ruler's line; on a computer the two bottom corners sit level (S-9). */ body[data-concept="a"] .maplibregl-ctrl-bottom-left { bottom:12px; } /* THE DISTANCE RULER'S LOOK - look B, RULED 2026-09-21 17:22:34 UTC, his words as typed: "I like b": the bare line - the line and its two end marks, the words above it, no patch, a thin white glow. Pale over the air photo RULED 18:20:17 UTC, his word as typed: "yes" (to "Pale over the air photo - yes?"): while Satellite is pressed the ruler turns #F1F3F5 with a dark glow, the switch the circle's ring and arrows already make (approved 2026-09-14). knowledge/plans/map-scale-2026-09-21.md. These lines are COPIED from the tool that painted what he looked at (tools/shoot_scale_looks.py, look B2), with only the selector narrowed to this page - never re-typed. It replaces call S-5's white patch, which faded a well dot under it (contrast 4.55 to 1 down to 1.34 to 1). Both end marks come from the one helper box, as the tool drew them, as short ticks rising from the line. The plain map on :5000 keeps the ruler as first built [Claude's call, as the colours' C11]. */ body[data-concept="a"] .maplibregl-ctrl.maplibregl-ctrl-scale { background:none; border:0; border-bottom:2px solid var(--kt-ink); padding:0 0 3px; height:auto; text-align:center; font:600 11px/13px Manrope, sans-serif; position:relative; text-shadow: 0 0 2px #fff, 0 0 2px #fff, 0 0 3px #fff, 0 0 4px #fff; filter: drop-shadow(0 0 1px rgba(255,255,255,.95)) drop-shadow(0 0 1px rgba(255,255,255,.95)); } body[data-concept="a"] .maplibregl-ctrl.maplibregl-ctrl-scale::after { content:''; position:absolute; left:0; right:0; bottom:-2px; height:8px; box-sizing:border-box; border-left:2px solid var(--kt-ink); border-right:2px solid var(--kt-ink); } body[data-concept="a"]:has(.switcher button[aria-pressed="true"]) .maplibregl-ctrl.maplibregl-ctrl-scale { color:#F1F3F5; border-bottom-color:#F1F3F5; text-shadow:0 0 2px rgba(23,36,46,.95), 0 0 2px rgba(23,36,46,.95), 0 0 3px rgba(23,36,46,.9), 0 0 4px rgba(23,36,46,.8); filter:drop-shadow(0 0 1px rgba(23,36,46,.95)) drop-shadow(0 0 1px rgba(23,36,46,.95)); } body[data-concept="a"]:has(.switcher button[aria-pressed="true"]) .maplibregl-ctrl.maplibregl-ctrl-scale::after { border-color:#F1F3F5; } /* B: permanent, non-overlapping map and reading panes. The chart has its own stable address. */ body[data-concept="b"] .map-block { flex:1; min-height:0; display:grid; grid-template-rows:minmax(140px, 1fr) minmax(300px, 53%); } body[data-concept="b"] #map { height:100%; min-height:0; position:relative; top:auto; z-index:0; } body[data-concept="b"] .concept-reader { display:flex; flex-direction:column; background:#fff; } body[data-concept="b"] .concept-reader-head { background:var(--kt-ground-deep); min-height:44px; } body[data-concept="b"] .concept-reader-head h2 { font-size:15px; } body[data-concept="b"] .concept-reader-content { flex:1; } body[data-concept="b"] { --bars-h:115px; } body[data-concept="b"] #status { border-bottom:0; } /* C: a compact atlas in normal document flow, with a broad desktop composition. */ body[data-concept="c"] .top { padding-top:14px; padding-bottom:14px; } body[data-concept="c"] .page-name { font-size:23px; max-width:520px; line-height:1.16; text-wrap:pretty; } body[data-concept="c"] .page-sentence { font-size:14px; line-height:1.5; max-width:480px; margin-top:8px; } body[data-concept="c"] .search-block { margin-top:12px; max-width:620px; } .concept-atlas-caption { display:flex; justify-content:space-between; gap:16px; padding:8px 16px; border-top:1px solid var(--kt-line); border-bottom:1px solid var(--kt-line); font-size:11px; color:var(--kt-slate); } body[data-concept="c"] #map { height:440px; } body[data-concept="c"].has-circle, body[data-concept="c"].drawing { --map-h:clamp(280px,calc(100svh - 310px),400px); } body[data-concept="c"].has-circle #map, body[data-concept="c"].drawing #map { height:var(--map-h); position:sticky; top:0; z-index:5; } body[data-concept="c"].has-circle .plot-row { position:relative; top:auto; background:white; z-index:0; margin:-8px -14px 8px; padding:8px 14px; border-bottom:1px solid var(--kt-line); } body[data-concept="c"] .map-foot { padding:14px 0 22px; } body[data-concept="c"] .map-block { padding-bottom:0; } @media (min-width:760px) and (min-height:501px) { body[data-concept] .bar-in { min-height:64px; padding-left:24px; padding-right:24px; } body[data-concept="a"] .top, body[data-concept="b"] .top { position:absolute; top:9px; left:230px; right:135px; width:auto; max-width:690px; padding:0; z-index:35; } body[data-concept="a"] .map-block { flex-direction:row; } body[data-concept="a"] #map { min-width:0; height:100%; } body[data-concept="a"] .concept-reader, body[data-concept="a"].concept-expanded .concept-reader { flex:none; width:370px; height:100%; margin:0; padding:0; border-radius:0; border-top:0; border-left:1px solid var(--kt-line); box-shadow:none; } body[data-concept="a"] .concept-reader::before { display:none; } body[data-concept="a"] .concept-reader-head { min-height:64px; border-bottom:1px solid var(--kt-line); } body[data-concept="a"]:not(.concept-expanded) .concept-reader-content { overflow:auto; visibility:visible; } body[data-concept="a"] .concept-drawer-guidance { padding-top:12px; } body[data-concept="a"] { --bars-h:185px; } body[data-concept="b"] .map-block { grid-template-rows:1fr; grid-template-columns:minmax(0,1fr) minmax(390px,38%); } body[data-concept="b"] .concept-reader { border-left:1px solid var(--kt-line); border-top:0; } body[data-concept="b"] .concept-reader-head { min-height:64px; padding:0 24px; } body[data-concept="b"] .concept-reader-head h2 { font-size:20px; } body[data-concept="b"] { --bars-h:clamp(180px,30vh,320px); } body[data-concept="b"] #plot { padding-top:20px; } body[data-concept="b"] .concept-workspace-intro { font-size:23px; margin:30px 24px 18px; max-width:18em; } body[data-concept="b"] #status { padding:10px 24px; font-size:15px; } body[data-concept="c"] .top { display:grid; grid-template-columns:1fr 1fr; gap:8px 50px; padding:30px 32px; align-items:center; } body[data-concept="c"] .page-name { font-size:32px; grid-column:1; max-width:550px; } body[data-concept="c"] .page-sentence { grid-column:1; } body[data-concept="c"] .search-block { grid-column:2; grid-row:1 / 3; width:100%; margin:0; justify-self:end; } .concept-atlas-caption { padding-left:32px; padding-right:32px; } body[data-concept="c"] #map, body[data-concept="c"].has-circle #map, body[data-concept="c"].drawing #map { position:relative; height:clamp(440px,58vh,680px); top:auto; } body[data-concept="c"] #plot { max-width:1040px; padding:22px 32px; margin:auto; --bars-h:190px; } body[data-concept="c"].has-circle .plot-row { position:static; margin:0 0 12px; padding:0; border:0; } body[data-concept="c"] #status { padding-left:32px; } } @media (min-width:1400px) { body[data-concept="a"] .concept-reader, body[data-concept="a"].concept-expanded .concept-reader { width:410px; } body[data-concept="b"] .map-block { grid-template-columns:minmax(0,1fr) minmax(440px,34%); } body[data-concept="b"] #plot { padding-left:28px; padding-right:28px; } body[data-concept="c"] .top { grid-template-columns:minmax(480px,1fr) minmax(500px,1fr); padding-left:52px; padding-right:52px; } body[data-concept="c"] .page-name { max-width:650px; font-size:37px; } body[data-concept="c"] .search-block { max-width:700px; } body[data-concept="c"].has-circle .map-block { display:grid; grid-template-columns:minmax(0,1fr) 480px; grid-template-rows:min-content 1fr; align-items:stretch; } body[data-concept="c"].has-circle #map { grid-column:1; grid-row:1 / 3; height:650px; } body[data-concept="c"].has-circle #plot { grid-column:2; grid-row:2; width:100%; align-self:start; margin:0; padding:26px 20px; --bars-h:230px; } body[data-concept="c"].has-circle #status { grid-column:2; padding:12px 20px; } } @media (max-width:374px) { body[data-concept] .wrap { padding-left:10px; padding-right:10px; } body[data-concept] .plot-metrics button { font-size:11px; padding-left:4px; padding-right:4px; } body[data-concept="b"] .map-block { grid-template-rows:minmax(140px,1fr) minmax(300px,53%); } } @media (max-width:759px) and (max-height:700px), (orientation:landscape) and (min-width:500px) and (max-height:500px) and (max-height:700px) { body[data-concept="b"] { --bars-h:85px; } } @media (prefers-reduced-motion:no-preference) { /* 2026-10-05, his words as typed: "When wellreport just opens the bottom tab kinda almost jumps up and goes back down." The card slid from the height it is drawn at before the script has sized it (170 px on a 844 px phone) down to its measured 76 px, every time the page opened. The slide now waits for concept-settled, which concepts.js sets once the opening page has been sized and drawn - so the card opens AT its height, and every later change of height slides as before. knowledge/plans/card-opens-at-its-height-2026-10-05.md */ body[data-concept="a"].concept-settled .concept-reader { transition:height .36s ease-in-out; } body[data-concept="a"]:not(.concept-expanded) .concept-reader-content { transition:visibility 0s .36s; } /* Until 2026-09-21 the menu nudged in from 30 px away in .18s and closed in one frame: .concept-menu[open] { animation:concept-menu-enter .18s ease-out; } @keyframes concept-menu-enter { from { transform:translateX(-30px); opacity:.4; } to { transform:translateX(0); opacity:1; } } RULED 2026-09-21 01:19:46 UTC, owner, as typed: "all moves should come softly and dradually sliding ... SAME GOES WHEN THREE LINES ARE CLICKED". It now slides in from fully off the left edge and slides back out; the script holds the close until the slide has finished. */ .concept-menu[open] { animation:concept-menu-enter .3s ease-out; } .concept-menu[open]::backdrop { animation:concept-menu-dim .3s ease-out; } .concept-menu.concept-menu-leaving { animation:concept-menu-leave .3s ease-in forwards; } .concept-menu.concept-menu-leaving::backdrop { animation:concept-menu-undim .3s ease-in forwards; } @keyframes concept-menu-enter { from { transform:translateX(-100%); } to { transform:translateX(0); } } @keyframes concept-menu-leave { from { transform:translateX(var(--concept-menu-from, 0px)); } to { transform:translateX(-100%); } } @keyframes concept-menu-dim { from { opacity:0; } to { opacity:1; } } @keyframes concept-menu-undim { from { opacity:1; } to { opacity:0; } } } /* A v8: approved top navigation and the existing full report in its own reader. The v7 height transition and single resize/redraw owner above stay unchanged. `.concept-desktop-data` left this line on 2026-09-20 with the element it styled: it was the flush-right second "The Records" on the computer bar, and his 12:12:54 UTC ruling put that word into the bar's own list of eight, so nothing builds it any more (checked in all three scripts the mock loads). Its paint rule went with it. The class name still appears in the LOCKED appearance source's print hide and in tools/measure_print_candidate.py; both only ever hide or measure-as-absent, both are outside this job, and the colours build carries a marker saying so rather than hunting a --kt-teal spot nobody can see. */ .concept-desktop-nav { display:none; } .concept-report[hidden], .concept-report-message[hidden], .concept-report-frame[hidden], .concept-report-actions [hidden], .concept-well-slot[hidden] { display:none!important; } /* RULED 2026-09-30 14:11:05 UTC summary box lighter, rest darker: the panel's host and its frame take the record's darker paper, so no lighter strip shows around the record; was #FCFCFA on both. */ .concept-report { flex:1; min-height:0; display:flex; flex-direction:column; background:#E4E9EC; } /* RULED 2026-09-30 20:20:58 UTC "go with slate": the record's Slate page; was #FAF6EB */ .concept-report-actions { flex:none; display:flex; align-items:center; gap:12px; min-height:42px; padding:0 14px; border-bottom:1px solid var(--kt-line); } .concept-report-actions a { font:600 13px/1.4 var(--kt-sans); color:var(--kt-teal); text-decoration:underline; text-underline-offset:3px; padding:10px 0; } .concept-report-close { margin-left:auto; } .concept-report-message { padding:16px 20px; font-size:14px; color:var(--kt-slate); } .concept-report-frame { flex:1; min-height:0; height:0; width:100%; border:0; background:#E4E9EC; } /* RULED 2026-09-30 20:20:58 UTC "go with slate"; was #FAF6EB */ /* NO FLASH OF THE RAW PAGE - his 2026-10-06 01:41:39 UTC "when clicked on well to display record, the well card flickers before arrives to proper view", his "go" 01:44:25 UTC. The record is a separate page inside this frame, and the browser paints it in its full form before the card's code (on that page's load event) strips its top bar and map door and restyles it; the last mark that code sets is data-launch-ready. Until then the frame keeps its place but is not seen, so "Loading well record..." is what shows. visibility, not display: the card's code measures the page while it adapts it. knowledge/plans/record-no-flash-2026-10-06.md */ /* SEE-THROUGH AS WELL - his "Yes" 2026-10-18 16:22:25 UTC to the short look and a build if small; the mechanism is CLAUDE'S CALL. Chrome keeps counting the boxes INSIDE a frame that is only visibility:hidden - they are "visible" by their own style - so the record's re-styling, done in the same instant it is shown, was counted as a jump (0.422 of a phone's screen after a tap; Google's line is 0.1), though the film shows nothing moving for a person. Chrome skips moves under a see-through ancestor and in the first picture after it, so the waiting frame is see-through too. No fade: nothing animates opacity here, so it appears at once, as before. knowledge/plans/record-moment-2026-10-18.md */ .concept-report-frame:not([data-launch-ready="true"]) { visibility:hidden; opacity:0; } body[data-concept="a"].concept-full-report .concept-reader-content { display:flex; flex-direction:column; overflow:hidden; } body[data-concept="a"].concept-full-report .concept-reader-tabs { flex:none; } body[data-concept="a"] #status.concept-resting-status { display:none; } @media (max-width:759px), (orientation:landscape) and (min-width:500px) and (max-height:500px) { body[data-concept="a"] .concept-drawer-guidance { font-size:16px; line-height:1.45; } body[data-concept="a"].concept-intro:not(.concept-expanded) .concept-reader { height:178px; } body[data-concept="a"] .concept-reader-head h2 { font-size:18px; } /* Leave a half-width circle and its handles visible above the open chart. */ body[data-concept="a"].concept-expanded:not(.concept-full-report) .concept-reader { height:min(410px,calc(100dvh - 154px - 50vw)); } body[data-concept="a"].concept-expanded.concept-full-report .concept-reader { height:calc(100dvh - 286px); } } @media (min-width:760px) and (min-height:501px) { body[data-concept="a"] .site-bar { flex:none; } body[data-concept="a"] .bar-in { gap:28px; } body[data-concept="a"] .concept-menu-button { display:none; } .concept-desktop-nav { display:flex; align-items:center; gap:28px; height:64px; } .concept-desktop-nav a { display:flex; align-items:center; align-self:stretch; color:var(--kt-ink); font-size:14px; font-weight:600; text-decoration:none; border-bottom:3px solid var(--kt-seam); padding-top:3px; } .concept-nav-pending { display:flex; flex-direction:column; gap:2px; font-size:14px; font-weight:600; color:var(--kt-slate); } .concept-nav-pending small { font-size:10px; font-weight:400; } body[data-concept="a"] .concept-place-label { margin-left:0; } /* The slogan is the PHONE bar's, and only the phone's: he ruled it for the "mobile version" (2026-09-15 12:16:42 UTC) and never for the computer. The computer bar also has no room - since his 12:12:54 UTC ruling of 2026-09-20 it carries his eight page links, and at 760 px those already take a second deck. Hidden, not left out of the page, so one element serves both and the two cannot drift apart. */ .concept-slogan { display:none; } body[data-concept="a"] .top { top:12px; left:16px; right:64px; max-width:620px; width:auto; padding:0; } body[data-concept="a"] .switcher { top:74px; } body[data-concept="a"].concept-full-report .concept-reader, body[data-concept="a"].concept-expanded.concept-full-report .concept-reader { width:clamp(400px,46vw,780px); } body[data-concept="a"] .concept-reader-head { min-height:48px; } /* its padding:0 20px went 2026-10-15 - the one-card build (RULED 11:43:18 UTC "A"): the heading keeps the phone's 14 px (line 101); a reading page's heading keeps 20 under its own class (outer-detail.css) */ body[data-concept="a"] .concept-drawer-guidance { padding:8px 20px; } /* .concept-report-actions { padding:0 20px } stood here until 2026-10-15 - the one-card build: the row takes the phone's 2px 14px (the every-screen block below). */ } @media (min-width:760px) and (min-height:501px) and (max-width:1000px) { body[data-concept="a"] .bar-in { gap:22px; padding-left:20px; padding-right:20px; } .concept-desktop-nav { gap:22px; } body[data-concept="a"] .concept-place-label { display:none; } } /* A v15: approved compact Pale blue study B, with joined controls and inset Search. Existing map, reader motion, report content and B/C keep their own rules. */ body[data-concept="a"] { /* RULED 2026-09-30 20:20:58 UTC "go with slate": the pressed fill is the Slate bar, the ground and the footer's ground the Slate ground. Was --kt-teal-deep:#EFEAE0, --kt-ground:#F5F2EA, --kt-ground-deep:#EFEAE0. */ --kt-teal-deep:#5B6B76; --kt-teal:#17242E; --kt-ground:#E4E9EC; --kt-ground-deep:#E4E9EC; --kt-ink:#17242E; --kt-line:#D8DDE1; --concept-paper:#FFFFFF; --ink:#17242E; --line:#D8DDE1; } /* A v16: bare directional arrows, with the original 40 px interaction targets. A faint contrasting edge keeps the strokes readable without a rectangular badge. */ body[data-concept="a"] .handle-center .handle-icon, body[data-concept="a"] .handle-edge .handle-icon { width:28px; height:28px; border:0; border-radius:0; background:transparent; box-shadow:none; color:var(--concept-circle-ink,#5B6B76); } body[data-concept="a"] .handle-center .handle-icon svg, body[data-concept="a"] .handle-edge .handle-icon svg { filter:drop-shadow(0 0 1px var(--concept-circle-halo,rgba(255,255,255,.9))); } body[data-concept="a"] .searchbar { position:relative; } body[data-concept="a"] #address { border-color:#D8DDE1; border-radius:14px; padding-right:46px; } body[data-concept="a"] #search-btn { position:absolute; right:1px; top:1px; bottom:1px; width:38px; height:auto; min-height:0; padding:0; border:0; border-radius:12px; display:grid; place-items:center; background:transparent; color:#17242E; box-shadow:none; } body[data-concept="a"] #search-btn svg { width:20px; height:20px; pointer-events:none; } body[data-concept="a"] #search-btn:focus-visible { outline:2px solid #17242E; outline-offset:-3px; } body[data-concept="a"] #search-btn:hover { background:#D3DBE0; filter:brightness(.94); } /* RULED 2026-09-30 20:20:58 UTC "go with slate": a light tint, the Slate band - the ten-set pictures' own rule; was #EFEAE0 */ body[data-concept="a"] .switcher { border-radius:12px; border-color:#D8DDE1; box-shadow:0 1px 4px #17242e18; } body[data-concept="a"] .plot-metrics { border-radius:12px; border-color:#D8DDE1; } /* RULED 2026-09-22 14:10:23 UTC, his words as typed: "iphone go". A phone paints its own see-through box over whatever is tapped, and a chart bar's button runs the whole height of the chart - so on a short bar the box looked like a full-height bar flashing ("brief glitch of drawing full hight bar", 14:00:32 UTC). The bar turning orange is the tap's one sign. Bars only: every other button's box is its own visible shape, so its flash reads as a normal press. */ body[data-concept="a"] #plot-bars .bar { -webkit-tap-highlight-color:transparent; } body[data-concept="a"] #circle-btn, body[data-concept="a"] #unit-toggle, body[data-concept="a"] .maplibregl-ctrl-group { border-radius:12px; } body[data-concept="a"] .switcher button[aria-pressed="true"], body[data-concept="a"] .plot-metrics button[aria-pressed="true"] { background:#5B6B76; color:#FFFFFF; box-shadow:none; } /* 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": the bar, cream words; was #EFEAE0 with #17242E */ /* RULED 2026-09-20 03:33:22 UTC, his words as typed: "What if color and outline is same as when sattelite is pushed?", confirmed 03:43:19 "I like it". A pushed Satellite key changes only its FILL - its line and its shadow are the white pill's own, kept on and off. The circle key is its own pill, so it keeps ITS line and shadow the same way. The pressed rule in the plain page sends the line to the pressed colour and switches the shadow off; both are put back here. C10: the thick helper line behind the arrow takes the key's own pushed fill, so the arrow stays whole - his "And arrow becomes a line", 06:57:04 UTC. */ body[data-concept="a"] #circle-btn[aria-pressed="true"], body[data-concept="a"] #circle-btn.pressed { background:#5B6B76; color:#FFFFFF; border-color:#D8DDE1; box-shadow:0 1px 4px #17242e18; } /* RULED 2026-09-30 20:20:58 UTC "go with slate": the pushed key is the Slate bar, the picture cream (it is drawn in currentColor); was #EFEAE0 with #17242E */ body[data-concept="a"] #circle-btn[aria-pressed="true"] svg .gap, body[data-concept="a"] #circle-btn.pressed svg .gap { stroke:#5B6B76; } /* C10 on Slate: the key's own fill; was #EFEAE0 */ @media (max-width:759px), (orientation:landscape) and (min-width:500px) and (max-height:500px) { body[data-concept="a"] #address { height:36px; padding:6px 46px 6px 12px; font-size:16px; line-height:22px; } body[data-concept="a"] #search-btn { top:0; bottom:0; height:36px; min-height:36px; } body[data-concept="a"] .switcher button { height:36px; min-height:36px; padding:5px 10px; } body[data-concept="a"] .plot-metrics button { height:36px; min-height:36px; padding:5px; } body[data-concept="a"] .concept-reader-head { min-height:36px; } body[data-concept="a"].concept-expanded:not(.concept-full-report) .concept-reader { height:min(398px,calc(100dvh - 166px - 50vw)); } body[data-concept="a"].concept-intro:not(.concept-expanded) .concept-reader { height:170px; } /* concept-well-loading (2026-09-27): one well tapped, its details still on their way - the drawer goes straight to the record's height, so it rises once (concepts.js, where the class is set, says why). */ body[data-concept="a"].concept-expanded:is(.concept-full-report,.concept-well-loading) .concept-reader { height:calc(100dvh - 294px); } } /* A v17: compact introductions, one record identity and clear reader actions. Earlier declarations above remain the reversible V16 starting point. */ body[data-concept="a"] { --kt-sans:"A IBM Plex Sans","Segoe UI",sans-serif; --kt-figs:"A Source Sans 3","Segoe UI",sans-serif; font-family:var(--kt-sans); } body[data-concept="a"] #plot, body[data-concept="a"] .drilled .bar-label { font-family:var(--kt-sans); } body[data-concept="a"] .x-axis, body[data-concept="a"] .bar-label { font-family:"A Source Sans 3","Segoe UI",sans-serif; } body[data-concept="a"] button, body[data-concept="a"] input { font-family:var(--kt-sans); } body[data-concept="a"] .plot-metrics button { font-size:13px; font-weight:600; padding-left:3px; padding-right:3px; } body[data-concept="a"] .bar-count, body[data-concept="a"] .bar-tick, body[data-concept="a"] .concept-record-id { font-family:"A Source Sans 3","Segoe UI",sans-serif; } body[data-concept="a"] .concept-record-id { font-variant-numeric:lining-nums tabular-nums slashed-zero; font-size:17px; } body[data-concept="a"] .concept-reader::before { display:none; } body[data-concept="a"] .concept-circle-close[hidden] { display:none !important; } /* the circle's x, shown by update() alone (section 21; the fold key's own rule stood here) */ body[data-concept="a"] .concept-reader-head h2 { font-size:16px; } body[data-concept="a"] .concept-reader-head { padding-top:4px; padding-bottom:4px; } body[data-concept="a"] .concept-menu-head { border-bottom:1px solid var(--kt-line); } body[data-concept="a"] .mark, body[data-concept="a"] .concept-desktop-nav a { border-color:var(--kt-line); } body[data-concept="a"] .mark::after { background:var(--kt-line); } body[data-concept="a"] .concept-desktop-nav a { border-bottom:0; } body[data-concept="a"] .concept-reader-tabs { padding:4px 14px; gap:0; border-bottom:0; } body[data-concept="a"] .concept-reader-tabs button { flex:1; min-height:32px; border:1px solid var(--kt-line); border-radius:10px 0 0 10px; } body[data-concept="a"] .concept-reader-tabs button + button { border-left:0; border-radius:0 10px 10px 0; } body[data-concept="a"] .concept-reader-tabs button[aria-pressed=true] { background:#5B6B76; color:#FFFFFF; border-bottom:1px solid var(--kt-line); } /* RULED 2026-09-30 20:20:58 UTC "go with slate"; was #EFEAE0 with #17242E */ body[data-concept="a"] .concept-report-actions { min-height:36px; gap:10px; } body[data-concept="a"] .concept-report-actions a { padding:6px 0; } body[data-concept="a"] .concept-report-actions button { min-height:36px; } body[data-concept="a"] #status.concept-guidance-status { display:none; } body[data-concept="a"] :is(button,a,input):focus-visible { outline:2px solid #17242E; outline-offset:2px; } /* The circle key after a finger or mouse pressed the picture in the drawer sentence: the page hands the keyboard to the key, and Safari rings any focus the page gives. RULED 2026-09-28 02:32:04 UTC, "no strange outline" - the mark comes off when the key is left or a key is pressed on it (concepts.js, the picture's press). Stronger than both ring rules, this one and the plain page's #circle-btn:focus-visible. */ body[data-concept="a"] #circle-btn.concept-no-ring:focus-visible { outline:none; } /* The menu's "Close", opened by a finger or a mouse - RULED 2026-10-04 22:32:09 UTC, his words as typed: "When three lines are opened, don't use frame around close" (concepts.js, NO FRAME AROUND "Close"). */ body[data-concept="a"] .concept-menu .concept-text-button.concept-no-ring:is(:focus,:focus-visible) { outline:none; } /* The two x keys in the card's dark heading - the well's x and a reading page's x - carry NO keyboard ring, on every screen. RULED 2026-10-15 23:12:13 UTC, his words as typed: "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". Until then the well's x had the house ring above (dark ink, a black box on the dark heading) and the reading x a white ring 3 px inside (outer-detail.css, withdrawn there). The x itself stays white on the dark heading. The cost for a keyboard user was put to him once and he ruled. The phone's reading pages close with "Hide x" on a white sheet - outside this ruling. */ body[data-concept="a"] :is(.concept-report-close, .concept-circle-close, .concept-reading-close, .concept-main-tab-x):focus-visible { outline:none !important; } /* the tabs' x's too, 2026-10-16 (section 20e call (h), his "All x") */ /* The map library rings its own plus, minus and credits keys in its bright blue #0096FF (the credits key on every tap, its rule has no keyboard-only reset). RULED 2026-09-19 00:10:37 UTC, owner, as typed: "i want no accent color". Off here; the ink outline one line up takes over for the keyboard. */ body[data-concept="a"] :is(.maplibregl-ctrl-group button, .maplibregl-ctrl-attrib-button):focus { box-shadow:none; } body[data-concept="a"].concept-full-report.concept-expanded .concept-drawer-guidance { display:none; } body[data-concept="a"].concept-full-report.concept-has-notice .concept-drawer-guidance { display:block; } body[data-concept="a"] .concept-drawer-guidance { padding-bottom:8px; } /* An empty line takes no room: the open list of wells at one dot has no line of its own since 2026-10-04 (his "drop it"). */ body[data-concept="a"] .concept-drawer-guidance:empty { display:none; } @media (max-width:759px), (orientation:landscape) and (min-width:500px) and (max-height:500px) { body[data-concept="a"].concept-empty .concept-reader { height:170px; } body[data-concept="a"].concept-has-notice:not(.concept-expanded) .concept-reader { height:auto; } body[data-concept="a"].concept-has-notice:not(.concept-expanded) .concept-reader-content { flex:0 0 0; height:0; } body[data-concept="a"].concept-full-report:not(.concept-expanded) .concept-reader { height:82px; } body[data-concept="a"].concept-expanded:not(.concept-full-report) .concept-drawer-guidance { font-size:14px; line-height:1.4; } body[data-concept="a"].concept-has-chart.concept-has-well { --bars-h:115px; } body[data-concept="a"].concept-has-chart.concept-has-well .concept-reader-head { padding-top:0; padding-bottom:0; } body[data-concept="a"].concept-has-chart.concept-has-well .concept-reader-tabs { padding-top:0; padding-bottom:0; } body[data-concept="a"].concept-has-chart.concept-has-well #plot { padding-top:4px; } } @media (min-width:760px) and (min-height:501px) { body[data-concept="a"] .map-block { position:relative; } body[data-concept="a"].concept-empty .concept-reader { position:absolute; right:16px; bottom:56px; width:340px; height:auto; max-height:calc(100% - 140px); border:1px solid var(--kt-line); border-radius:12px; box-shadow:0 2px 12px #17242e14; } body[data-concept="a"].concept-empty .concept-reader-head { min-height:40px; border-bottom:0; } body[data-concept="a"].concept-empty .concept-drawer-guidance { font-size:16px; padding-top:0; } body[data-concept="a"].concept-empty .concept-reader-content { flex:0; } body[data-concept="a"].concept-full-report .concept-drawer-guidance { display:none; } } @media (min-width:760px) and (min-height:501px) and (max-height:500px) { body[data-concept="a"] .bar-in, body[data-concept="a"] .concept-desktop-nav { min-height:48px; height:48px; } body[data-concept="a"] .concept-reader-head { min-height:36px; } body[data-concept="a"] .concept-drawer-guidance { padding-top:2px; padding-bottom:4px; } body[data-concept="a"] { --bars-h:95px; } body[data-concept="a"] .top { left:12px; right:44px; } body[data-concept="a"] #address { padding-left:10px; } } /* A v18: phone reader actions and site styling, requested in the mobile review. Earlier styles remain intact for desktop and the saved V17 reference. */ .concept-scan-link, .concept-explain { display:none; } @media (max-width:759px), (orientation:landscape) and (min-width:500px) and (max-height:500px) { body[data-concept="a"] .concept-place-label { display:none; } body[data-concept="a"] .switcher button { font-size:15px; padding-left:10px; padding-right:10px; } body[data-concept="a"] .plot-metrics button { font-size:14px; } body[data-concept="a"] #unit-toggle { font-size:15px; } /* the text buttons' 15 px left this rule for the every-screen block below, 2026-10-15 */ /* The card's own look - the heading's gap, the x, the record's ground, the row, the PDF link, the Explain switch and its pip - stood here, phone-only, until 2026-10-15; those 17 rules now live in the every-screen block right under this one (the one-card build, RULED 11:43:18 UTC, his word as typed: "A"). */ } /* THE ONE CARD - the phone card's look on every screen, RULED 2026-10-15, his words as typed: 10:27:43 UTC "what if everything looks the phone way? i like phones layout most", 10:34:07 "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). The rules below were the phone block's; lifted word for word. Screen only, never paper. The phone's MOVES (the card's heights, the slide, the shadow upward, the drag line) stay in the phone blocks. */ @media screen { body[data-concept="a"] .concept-text-button { font-size:15px; } body[data-concept="a"] .concept-reader-head { gap:4px; } body[data-concept="a"] .concept-reader-head h2 { min-width:0; } /* ... and the reading pages' x on a computer is the same key - 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). It stands in the heading's row (concepts.js) and is hidden ([hidden]) unless a page shows. */ body[data-concept="a"] .concept-reader-head .concept-report-close, body[data-concept="a"] .concept-reader-head .concept-circle-close, body[data-concept="a"] .concept-reader-head .concept-reading-close { flex:none; margin:0; width:36px; min-height:40px; padding:0; font:26px/1 Arial,sans-serif; } body[data-concept="a"]:not(.concept-full-report) .concept-reader-head .concept-report-close { display:none; } body[data-concept="a"] .concept-report { background:#E4E9EC; } /* RULED 2026-09-30 20:20:58 UTC "go with slate"; was #FAF6EB (RULED 2026-09-30 14:11:05 UTC summary box lighter, rest darker), and #fff before */ body[data-concept="a"] .concept-report-actions { flex-wrap:wrap; gap:0 8px; padding:2px 14px; min-height:44px; } body[data-concept="a"] .concept-report-actions > a:not(.concept-scan-link) { display:none; } body[data-concept="a"] .concept-report-actions > button:first-child:not([hidden]) { order:-1; flex-basis:100%; text-align:left; padding-left:0; } body[data-concept="a"] .concept-report-actions .concept-scan-link { display:inline-flex; align-items:center; min-height:40px; padding:0; font-size:15px; } body[data-concept="a"] .concept-explain { display:inline-flex; flex:none; align-items:center; justify-content:center; gap:6px; margin-left:auto; width:102px; height:36px; padding:0 8px; border:1px solid #D8DDE1; border-radius:10px; color:#17242E; background:white; font:600 15px/1.3 var(--kt-sans); cursor:pointer; } body[data-concept="a"] .concept-explain[aria-pressed="true"] { background:#5B6B76; color:#FFFFFF; } /* RULED 2026-09-30 20:20:58 UTC "go with slate"; was #EFEAE0 */ body[data-concept="a"] .concept-explain:disabled { opacity:.5; cursor:default; } .concept-explain-pip { flex:none; position:relative; width:24px; height:14px; border-radius:8px; background:#D8DDE1; } .concept-explain-pip::after { content:""; position:absolute; left:2px; top:2px; width:10px; height:10px; border-radius:50%; background:white; } [aria-pressed="true"] .concept-explain-pip { background:#FFFFFF; } /* on the Slate key the track goes cream; was #17242E */ [aria-pressed="true"] .concept-explain-pip::after { background:#5B6B76; } /* and the knob takes the key's fill, or white on cream is lost */ [aria-pressed="true"] .concept-explain-pip::after { left:12px; } } @media (max-width:359px) { body[data-concept="a"] .plot-metrics button { font-size:13px; } body[data-concept="a"] .concept-reader-head h2 { font-size:14px; } } /* A v19: the map's own keys, as he ruled them on 2026-09-19. The Well records key is gone and the wells are simply always on; Satellite stands alone; the old floating note is a real button beside it; the circle key comes up out of the bottom corner and sits under the white pill. His words and the hour for each are in knowledge/plans/map-buttons-build-2026-09-19.md, section 1. EVERY NUMBER BELOW IS READ OFF THE WHITE PILL the keys sit in, so the two controls stay in family with it and with each other: the pill's top is 12 px (line 28), and 74 px from 760 px up (line 198); the pill is one border wider than its key all round, so the KEY's top is the pill's plus 1; the key is 36 px tall on a phone (line 250) and 44 px from 760 px up (map.html, min-height); so the pill is 38 px tall on a phone and 46 px from 760 up, and 6 px under it is where the circle key goes. Move the pill and these are the lines that move with it. The zoom-in button is DRAWN ONLY while the map itself says it is too far out for dots: map.js writes data-wells-gate="out" / "in" on #map. The rule below reads "out", never "not in", because the sign is ABSENT until the map loads - read the other way round, a map that never loads would offer a way to zoom in to wells it can never show. Coming and going is CSS alone on an absolutely placed box, so nothing already on screen moves either way. That guard covers ONE of the two ways a map can break, and the sentence that used to stand here - "on a map whose basemap never loads it never arrives at all" - was measured false for the other (2026-09-19, output/step3-20260919/attack/). Refuse the basemap STYLE and the map is never built at all, so the sign never arrives and this button never draws. But let the style load with the TILE host dead and MapLibre's load event still fires on a phone - 3 of 3 at 390 px, 0 of 3 at 1920 - so the sign DOES arrive, it reads "out", and the button is offered over a blank background. Pressing it there still brings the well dots up, because they come from our own app and not from the tile host. The page before this build drew the same words over the same dead map at phone widths, so that end state is not new and nothing here promises otherwise. */ body[data-concept="a"] .concept-zoom-button { display:none; position:absolute; top:13px; height:36px; left:var(--concept-zoom-left,102px); z-index:6; align-items:center; gap:7px; margin:0; padding:0 12px; background:#fff; border:1px solid #D8DDE1; border-radius:12px; color:var(--kt-teal); font:600 15px/1.2 var(--kt-sans); box-shadow:0 1px 4px #17242e18; white-space:nowrap; cursor:pointer; } body[data-concept="a"] #map[data-wells-gate="out"] .concept-zoom-button { display:flex; } body[data-concept="a"] .concept-zoom-icon { flex:0 0 auto; width:17px; height:17px; } /* One wording on screen, and it is the one a screen reader says: the wording not in use is taken OUT with display:none, never painted away, or the announced name would read as both at once. The short words are for the narrow phones only (his 12:30:16 UTC "what if zoom in for wells? for those sizes only"); 344 px is the first width where the full words clear the plus key by the same 9 px that sits between Satellite and this button. */ body[data-concept="a"] .concept-zoom-short { display:none; } @media (max-width:343px) { body[data-concept="a"] .concept-zoom-long { display:none; } body[data-concept="a"] .concept-zoom-short { display:inline; } } /* The circle key: left edge lined up with the pill's own, 6 px of air under it. Anchored by its TOP on purpose - the map changes height when the drawer opens and when a circle opens the chart, and a key measured from the map's BOTTOM (as this one was until today) rides up and down with it. */ body[data-concept="a"] #circle-btn { top:56px; left:12px; bottom:auto; } @media (min-width:760px) and (min-height:501px) { body[data-concept="a"] .concept-zoom-button { top:75px; height:44px; left:var(--concept-zoom-left,106px); } body[data-concept="a"] #circle-btn { top:126px; } } /* A v20: the phone menu and the computer front door, as he ruled them on 2026-09-15. 11:17:22 UTC "Ok" - on the PHONE the menu takes the footer's job; the phone screen itself stays exactly as he approved it. 11:18:30 UTC "Ok" - on a COMPUTER the ruled front door comes back: the page name, its one sentence, the two fine-print lines and the footer, so the map is no longer the whole window and the page scrolls. 12:24:39 UTC - the promise line does NOT move into the footer; it stays in the band right under the map, where it already is. The build note, with every choice of Claude's in it named one by one, is knowledge/plans/menu-and-front-door-build-2026-09-20.md. This block comes last on purpose, the way every earlier A vN block does: it supersedes the .top rules of v8 and of the first desktop block above (position, place and padding), which are left where they are as the reversible starting point. */ @media (max-width:759px), (orientation:landscape) and (min-width:500px) and (max-height:500px) { /* The page's own name and sentence stay IN the page and are clipped to one pixel - the same clip the script used to hand them for good. A screen reader still reads them; the approved phone screen still starts with the search box and the map right under it. FROM THE FIRST PAINT - 2026-10-18, his ruling "Fix it" (13:22:25 UTC) on the phone's jump: until today only the class the script adds was clipped, so a phone drew the two lines for the 0.4 - 4 s before the scripts ran and then the map jumped up 106 px under them (0.115 counted by Google's own tool, over its 0.1 line; tools/measure_front_door_jump.py). The elements themselves are clipped now, so the page arrives the way the script leaves it; the class stays as a second hold. knowledge/plans/front-door-jump-2026-10-18.md */ body[data-concept="a"] .concept-front-words, body[data-concept="a"] .top .page-name, body[data-concept="a"] .top .page-sentence { 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; } /* The bar's two worded links (the plain page's own) are hidden from the first paint on a phone, so "The Records" does not stand in the bar for a moment and then give way to the slogan when the script takes the nav out (the same moment as the jump above). The script still removes them. [CLAUDE'S CALL, 2026-10-18, told to him.] */ body[data-concept="a"] .bar-nav { display:none; } /* The footer's job belongs to the MENU on a phone, so neither the footer nor the fine print stands on the screen as well. They stay in the page for the menu to copy. */ body[data-concept="a"] .map-foot, body[data-concept="a"] .site-foot { display:none; } } @media (min-width:760px) and (min-height:501px) { /* An ordinary scrolling document again. The phone keeps its one-screen app (the rule above this block still holds there); only a computer gets the page back. */ body[data-concept="a"] { height:auto; min-height:100vh; overflow:visible; display:block; } /* THE STRIP between the bar and the map: the page's name and its one sentence side by side, wrapping to two lines when they do not fit. [Claude's call] - he ruled that they come back, not where they sit; a narrow column on a 1920 screen is the "lot of unused space" he objected to on 2026-09-02. */ body[data-concept="a"] .top { position:static; display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 22px; width:auto; max-width:none; padding:13px 24px 12px; } body[data-concept="a"] .page-name { font-size:26px; line-height:1.15; margin:0; } body[data-concept="a"] .page-sentence { font-size:15px; line-height:1.5; margin:0; max-width:none; } /* Only the SEARCH BOX rides on the map, and it does not move: every number here is the one .top carried before this block, the centring margin included (the box is 620 px inside a 16-to-64 band, so .wrap's own `margin:0 auto` is what put it where he approved it). */ body[data-concept="a"] .search-block { position:absolute; top:12px; left:16px; right:64px; width:auto; max-width:620px; margin:0 auto; z-index:35; } /* THE MAP'S HEIGHT ON A COMPUTER [Claude's call]. A fixed height, not the whole window: what is taken off is the bar and the strip above the map, plus a deliberate peek of what is under it - the promise line and the top of the footer. That peek is the only thing that says there is more below, because the map itself swallows the mouse wheel. The floor keeps a short window usable. There is NO ceiling, and that is the fix of 2026-09-20: `clamp(..., 860px)` stopped the map growing at 860, so the whole page stopped growing with it, and on any screen taller than about 1228 px a slab of the body's own ground stood under the footer - 211 px at 1920x1440, 932 px on a 4K screen - which is the "lot of unused space" he objected to on 2026-09-02. His own 1920x1080 monitor cannot catch it, because there the footer still ends below the fold. Taking the peek off the window's height at EVERY height is what keeps the footer at the end of the page on every screen. */ body[data-concept="a"] .map-block { flex:none; height:max(320px, calc(100vh - 260px)); } /* The fine print and the footer line up with the wordmark, not with the phone's 16 px gutter. */ body[data-concept="a"] .map-foot > .wrap, body[data-concept="a"] .site-foot > .wrap { padding-left:24px; padding-right:24px; } } @media (min-width:760px) and (min-height:501px) and (max-width:1000px) { /* The same 20 px the bar takes at these widths. */ body[data-concept="a"] .top { padding-left:20px; padding-right:20px; } body[data-concept="a"] .map-foot > .wrap, body[data-concept="a"] .site-foot > .wrap { padding-left:20px; padding-right:20px; } } @media (min-width:760px) and (min-height:501px) and (max-height:500px) { /* The short-window squeeze above used to move .top; it moves the box itself now. */ body[data-concept="a"] .search-block { left:12px; right:44px; } } @media (min-width:1400px) { body[data-concept="a"] .page-name { font-size:29px; } body[data-concept="a"] .page-sentence { font-size:16px; } } @media print and (min-width:760px) { /* PAPER, on any sheet a printer lays out at 760 px or wider. Added 2026-09-20, after a read-only attack printed real sheets. The page's own name and its sentence are for the screen. They never printed before this block existed - the script clipped them to one pixel at EVERY width - and nothing ruled that they should start. On paper they only repeat what the top of the same sheet already carries in the wordmark and the search box, and the room they take is what pushed the licence sentence and "Published by WellReport" onto a second, almost empty sheet whenever the paper is turned sideways (a real Letter-landscape sheet came out as two pages at Chrome's default margins AND at margins None). So the phone's clip holds on paper too, and .top hands back the padding it takes for those two lines on a screen - it holds nothing else at these widths, because the search box rides on the map here. His ruling "B" of 2026-09-19 is untouched: the map keys are placed from the MAP's own top edge, not from anything above it. THE PRINTED MAP'S HEIGHT IS A PLAIN NUMBER, and it has to be. `100vh` does not mean the sheet when Chrome prints: measured 2026-09-20 on real page.pdf() sheets, taking the 860 px ceiling off the screen rule (the tall-window fix above) turned the UPRIGHT margins-None sheet from one page into two, which can only happen if the printed map was reaching past 1120 px - so on paper that height grows against the document it is part of, and the old ceiling was the only thing holding it still. A number cannot do that. 500 px keeps the printed map the size it already printed at (about 450 px of picture once the 48 px key row under it is taken off, and the strip's 78 px comes off the top instead), and it is 80 px below the width where the tightest sheet of the six breaks in two - A4 turned sideways at Chrome's default margins, 717 px of paper, which breaks between 580 and 600. Every one of the six is checked by a robot. */ body[data-concept="a"] .map-block { height:500px; } body[data-concept="a"] .concept-front-words, body[data-concept="a"] .top .page-name, body[data-concept="a"] .top .page-sentence { /* the elements themselves since 2026-10-18, as on the phone above */ 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; } body[data-concept="a"] .top { padding-top:0; padding-bottom:0; } } /* A v21: HIS EIGHT PAGE LINKS MOVE INTO THE TOP BAR. RULED 2026-09-20 12:12:54 UTC, his words as typed: "Those pages should not be a footer they should be part of navigation bar for anything except mobile". It replaces the footer half of his 11:18:30 UTC ruling of 2026-09-15, which the v20 block above built this morning; everything else in v20 stands - the page name, its sentence, the promise line, the map's height and the page scrolling. The phone is untouched: its three-lines menu still carries the eight, the promise line, the licence line and "Published by WellReport". The build note, with every choice of Claude's in it named one by one, is the second half of knowledge/plans/menu-and-front-door-build-2026-09-20.md. */ @media screen and (min-width:760px) and (min-height:501px) { /* (2026-09-22: the list is SIX now - "Map" out, "Browse by county" on its own small line under the credit line, below - and the bar carries the same six.) The footer's list of the eight is HIDDEN, never removed and never moved. The phone menu clones `.foot-links`, so an emptied or deleted