/* ============================================================ TVMK Reports — the app Wil uses on his phone. Dark by intent, not fashion: it is opened at the end of a job, often in a dim room, and it matches the brand's ink ground. Colour tokens come from css/tokens.css, which is a copy of the website's, so the two cannot drift. Three rules this file is built around: - Every tappable thing is at least 48px and 8px from its neighbour. - Inputs are 17px. Below 16px iOS zooms the page on focus and never zooms back, which strands the layout mid-form. - The bottom bar clears the home indicator via safe-area insets, which only work because index.html sets viewport-fit=cover. ============================================================ */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} :root{ --bg:var(--ink); --surface:#16171A; --surface-2:#1E2024; --line:rgba(245,242,237,.14); --line-strong:rgba(245,242,237,.26); --fg:var(--plaster); --fg-mute:rgba(245,242,237,.66); --fg-faint:rgba(245,242,237,.42); --danger:#F0857D; --ok:#7BC49A; --tap:48px; --pad:20px; /* ONE vertical rhythm for every block on a step -- chip groups, screen cards, photo blocks and the buttons that follow them. These used to be 26px between groups but 0 before the screens list and 0 before "Add a second screen", so a card sat flush against the chips above it. If you add a new block to a step, give it this. */ --stack:24px; /* The ground a gold-ring button sits on. The ring is a padding-box fill under a border-box gradient, so this MUST match whatever is actually behind the button or the fill punches a hole in the panel. Overridden on .sheet__panel and .confirm, which sit on --surface rather than --bg. */ --ring-fill:var(--bg); } /* THE SIDEWAYS-DRAG LOCK. Palmer could drag the whole page left and right on his iPhone. It does not reproduce in Chromium at 320/375/390/393/430px on any step -- scrollWidth equals innerWidth and scrollX stays 0 -- so the cause is either WebKit-only or Safari's own edge-swipe gesture, which CSS cannot touch. What was certainly missing: overscroll-behavior was set on BODY only, where it computes to `auto` on , and there was no touch-action or overflow-x anywhere in the file. touch-action:pan-y is the load-bearing line. It refuses horizontal touch panning at the compositor whatever the underlying cause. `pinch-zoom` IS IN THE LIST DELIBERATELY. touch-action:pan-y on its own also refuses pinch, which broke zooming on the report previews -- Palmer reported it as zoom being "hard to make work or very intermittent". A touch-action value is a whitelist: anything not named is disabled. */ html{background:var(--bg);-webkit-text-size-adjust:100%; overflow-x:clip;overscroll-behavior-x:none} body{ background:var(--bg);color:var(--fg); font-family:var(--f-body);font-size:16px;line-height:1.5; -webkit-font-smoothing:antialiased; /* Stops the whole app rubber-banding as one sheet on iOS, which otherwise makes the fixed bars look detached mid-scroll. */ overscroll-behavior:none; overflow-x:clip; touch-action:pan-y pinch-zoom; min-height:100dvh; } svg{display:block;fill:none;stroke:currentColor;stroke-width:2; stroke-linecap:round;stroke-linejoin:round} button{font:inherit;color:inherit;background:none;border:0;cursor:pointer; -webkit-tap-highlight-color:transparent} input,textarea{font:inherit;color:inherit} [hidden]{display:none !important} :focus-visible{outline:2px solid var(--gold-2);outline-offset:2px;border-radius:4px} .mark{font-family:var(--f-display);font-weight:800;letter-spacing:-.03em; background:var(--grad-gold-lit);-webkit-background-clip:text;background-clip:text; color:transparent;font-size:20px} .mark--lg{font-size:34px} .h1{font-family:var(--f-display);font-weight:700;font-size:26px;line-height:1.12; letter-spacing:-.015em;margin-bottom:8px} .h2{font-family:var(--f-display);font-weight:700;font-size:20px;margin-bottom:16px} .lede{color:var(--fg-mute);font-size:15px;margin-bottom:24px} /* ---------------------------------------------------------------- lock --- */ .lock{min-height:100dvh;display:grid;place-items:center; padding:max(24px,env(safe-area-inset-top)) 24px max(24px,env(safe-area-inset-bottom))} .lock__inner{width:100%;max-width:380px;text-align:center} .lock__sub{color:var(--fg-mute);font-size:14px;letter-spacing:.16em; text-transform:uppercase;margin:10px 0 40px} .lock .lbl{text-align:left} /* Without this the gold-ringed input and the gold-filled button touch and read as one control. */ .lock #lockBtn{margin-top:18px} .lock__forgot{min-height:44px;margin-top:6px;font-size:14px;color:var(--fg-mute); text-decoration:underline;text-underline-offset:3px} .lock__help{margin-top:10px;font-size:14px;line-height:1.5;color:var(--fg-mute); text-align:left;background:var(--surface);border:1px solid var(--line); border-radius:10px;padding:14px} /* --------------------------------------------------------------- fields --- */ .lbl{display:block;font-size:13px;font-weight:600;letter-spacing:.06em; text-transform:uppercase;color:var(--fg-mute);margin:22px 0 8px} .lbl__opt{text-transform:none;letter-spacing:0;font-weight:400;color:var(--fg-faint)} .input{ width:100%;min-height:var(--tap);padding:13px 15px; font-size:17px; /* below 16px iOS zooms on focus */ background:var(--surface);color:var(--fg); border:1px solid var(--line);border-radius:10px; appearance:none; } .input:focus{border-color:var(--gold-2);outline:none} .input::placeholder{color:var(--fg-faint)} .input--area{min-height:150px;resize:vertical;line-height:1.55} /* iOS renders an empty date input as blank; showing the placeholder keeps the control legible before a value exists. */ input[type=date]{min-height:var(--tap)} .msg{font-size:14px;margin-top:10px;color:var(--fg-mute)} .msg--err{color:var(--danger)} .msg--ok{color:var(--ok)} /* ---------------------------------------------------------------- chips --- */ .group{margin-top:var(--stack)} /* The screens list and the button that follows it. Adjacent margins collapse, so with a single screen -- where #screens holds bare .group elements -- this does not double up. */ #screens{margin-top:var(--stack)} #btnAddScreen{margin-top:var(--stack)} .group__label{font-size:13px;font-weight:600;letter-spacing:.06em; text-transform:uppercase;color:var(--fg-mute);margin-bottom:12px} .group__opt{text-transform:none;letter-spacing:0;font-weight:400; color:var(--fg-faint)} /* The message lands under the group it is about. A toast naming a field three screens further up is worse than no message at all. */ .group__err{margin-top:10px;font-size:14px;color:var(--danger)} .group.is-bad .group__label{color:var(--danger)} /* A prompt, not an alarm. The label and the message carry the message; the chips only need to look addressed. */ .group.is-bad .chip{border-color:rgba(240,133,125,.3)} .group.is-bad .chip[aria-pressed="true"]{border-color:var(--gold-1)} /* Two columns, not a wrapped flex row. Grid's default `align-items:stretch` is what does the work: "Drywall + wood studs" wraps to two lines and the chip beside it grows to match, so no row is ever ragged. Rows are content-sized and DO differ from each other -- forcing them all to the tallest would pad every short label to two lines and cost a screenful of scrolling. .chips--3 is for groups whose labels are two or three characters (screen size) -- at half width each those look like empty boxes. */ .chips{display:grid;grid-template-columns:repeat(2,1fr);gap:10px; grid-auto-rows:minmax(var(--tap),auto)} .chips--3{grid-template-columns:repeat(3,1fr)} .chip{ min-height:var(--tap);padding:11px 15px; font-size:15px;font-weight:500;text-align:left;line-height:1.3; display:flex;align-items:center;min-width:0; /* 999px was right for a pill in a flex row and is wrong the moment a label wraps to two lines inside a fixed-width cell. */ background:var(--surface);border:1px solid var(--line);border-radius:12px; color:var(--fg); transition:border-color .12s ease,color .12s ease,box-shadow .12s ease; } .chips--3 .chip{justify-content:center;text-align:center} /* "Other" is a different kind of answer, so it gets its own full-width row rather than sharing one with a real option. */ .chip[data-value="other"]{grid-column:1 / -1;justify-content:center;text-align:center} .chip[aria-pressed="true"]{ background:var(--grad-gold);border-color:var(--gold-1); color:var(--ink);font-weight:600; box-shadow:0 2px 14px -6px rgba(212,175,55,.55)} .chip:active{transform:scale(.97)} .chip__other{margin-top:12px} /* -------------------------------------------------------------- screens --- */ /* A card only exists once there are two screens. With one, renderScreens() emits the fields bare and the step looks exactly as it always did. */ .screen{background:var(--surface);border:1px solid var(--line);border-radius:14px; padding:16px;margin-bottom:var(--stack)} .screen__head{display:flex;justify-content:space-between;align-items:center; gap:12px;margin-bottom:4px} .screen__n{font-size:13px;font-weight:600;letter-spacing:.1em; text-transform:uppercase;min-width:0;overflow:hidden;text-overflow:ellipsis; white-space:nowrap; background:var(--grad-gold);-webkit-background-clip:text;background-clip:text; color:transparent} .screen__rm{flex:none;min-height:36px;padding:6px 10px;font-size:14px; color:var(--fg-faint)} .screen .group:first-of-type{margin-top:var(--stack)} .screen__sub{margin-top:20px;padding-top:16px;border-top:1px solid var(--line)} .screen__toggle{display:flex;gap:12px;align-items:flex-start;min-height:var(--tap); font-size:15px;line-height:1.35;cursor:pointer} /* Naming the four groups on the label is the whole fix -- without it nobody opens this looking for cabling. */ .screen__toggle em{display:block;margin-top:3px;font-style:normal;font-size:13px; color:var(--fg-faint)} .screen__toggle input{flex:none;width:22px;height:22px;margin-top:1px; accent-color:var(--gold-2)} /* What this screen is inheriting, spelled out. Inheriting should not mean not knowing -- Wil can see what screen 3 is claiming without opening it. */ .screen__inherit{margin-top:10px;font-size:14px;line-height:1.45; color:var(--fg-faint)} .lede--note{margin-top:22px;margin-bottom:0;font-size:14px;color:var(--fg-faint)} /* --------------------------------------------------------------- photos --- */ .slot{background:var(--surface);border:1px solid var(--line);border-radius:14px; padding:14px;margin-bottom:var(--stack)} .slot__head{display:flex;justify-content:space-between;align-items:center; margin-bottom:12px} .slot__n{font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase; background:var(--grad-gold);-webkit-background-clip:text;background-clip:text; color:transparent} .slot__rm{min-height:36px;padding:6px 10px;font-size:14px;color:var(--fg-faint)} .slot__pair{display:grid;grid-template-columns:1fr 1fr;gap:10px} .drop{ position:relative;aspect-ratio:4/3;border-radius:10px;overflow:hidden; background:var(--surface-2);border:1px dashed var(--line-strong); display:grid;place-items:center;text-align:center; color:var(--fg-faint);font-size:13px;font-weight:500; } .drop.has{border-style:solid;border-color:var(--line);color:transparent} .drop img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .drop input{position:absolute;inset:0;opacity:0;cursor:pointer} .drop__tag{position:absolute;left:0;top:0;z-index:2;padding:5px 9px;font-size:11px; font-weight:600;letter-spacing:.12em;text-transform:uppercase; background:rgba(14,14,16,.76);color:var(--gold-1);border-bottom-right-radius:10px} .drop__busy{position:absolute;inset:0;z-index:3;display:grid;place-items:center; background:rgba(14,14,16,.7);color:var(--fg);font-size:13px} .slot__cap{margin-top:10px} /* -------------------------------------------------------------- previews --- */ .previews{display:grid;gap:14px;margin-bottom:26px} .previews button{display:block;width:100%;padding:0;border-radius:10px} .previews__hint{margin:-14px 0 26px;font-size:14px;color:var(--fg-faint); text-align:center} /* ------------------------------------------------------------------ lens --- */ /* A sheet is landscape and the phone is portrait, so a preview in the page is always going to be too small to read. Tapping one opens it here instead: full screen, and a tap toggles between fit-width and 2.6x with the frame scrolling underneath. Explicit zoom rather than relying on pinch, because pinch inside a fixed overlay behaves differently on every iOS release -- this works the same everywhere. */ .lens{position:fixed;inset:0;z-index:90;background:var(--bg); display:flex;flex-direction:column} .lens__bar{display:flex;align-items:center;justify-content:space-between; gap:8px;padding:calc(6px + env(safe-area-inset-top)) 8px 6px} .lens__n{font-size:14px;color:var(--fg-mute);letter-spacing:.08em; text-transform:uppercase} .lens__stage{flex:1 1 auto;min-height:0;overflow:auto; -webkit-overflow-scrolling:touch; /* The one place horizontal panning is wanted, so the page-level lock is lifted here and only here. */ touch-action:auto; padding:0 8px calc(12px + env(safe-area-inset-bottom))} .lens__img{width:100%;height:auto;display:block;border-radius:8px; transition:width .18s var(--ease-out)} .lens.is-zoomed .lens__img{width:260%;max-width:none} @media (prefers-reduced-motion:reduce){.lens__img{transition:none}} .previews img{width:100%;height:auto;border-radius:10px;border:1px solid var(--line); background:var(--surface)} .previews--busy{min-height:220px;display:grid;place-items:center; color:var(--fg-mute);font-size:15px;text-align:center} /* --------------------------------------------------------------- confirm --- */ .confirm{background:var(--surface);border:1px solid var(--line); border-radius:14px;padding:18px;--ring-fill:var(--surface)} .confirm__warn{font-size:14px;color:var(--gold-1);margin-bottom:12px} /* The address is set large and allowed to break anywhere: a long address that silently truncates is exactly how a report goes to the wrong person. */ .confirm__addr{font-family:var(--f-display);font-weight:700;font-size:20px; line-height:1.25;word-break:break-all;margin-bottom:14px} .confirm .btn--block{margin-top:12px} /* ------------------------------------------------------------------ sent --- */ .sent{text-align:center;padding-top:18px} .sent__tick{width:64px;height:64px;margin:0 auto 20px;stroke:var(--ok);stroke-width:2.4} .sent__addr{font-family:var(--f-display);font-weight:700;font-size:19px; word-break:break-all;margin:6px 0 4px} .sent__meta{font-size:13px;color:var(--fg-faint);margin-bottom:26px} .sent .btn{margin-top:12px} /* --------------------------------------------------------------- buttons --- */ .btn{min-height:var(--tap);padding:13px 20px;border-radius:10px; font-size:16px;font-weight:600;text-align:center; transition:opacity .12s ease,background .12s ease} /* The same ramp the website's primary button uses (.btn--brass). Flat --gold-2 on ink is what read as mustard. */ .btn--primary{background:var(--grad-gold);color:var(--ink)} /* Ghost is the site's on-dark gold ring: a hairline gradient BORDER via the padding-box/border-box trick, gold-1 text. Gold on every button without flattening the hierarchy -- a filled button still outranks a ringed one. --ring-fill has to match the ground behind the button; see the token. */ .btn--ghost{ border:1px solid transparent; background: linear-gradient(var(--ring-fill),var(--ring-fill)) padding-box, linear-gradient(120deg, rgba(245,231,193,.9), rgba(212,175,55,.6) 50%, rgba(245,231,193,.9)) border-box; color:var(--gold-1)} .btn--block{display:block;width:100%} .btn--grow{flex:1 1 auto} .btn--sm{min-height:40px;padding:9px 14px;font-size:14px} .btn:disabled{opacity:.45;cursor:default} .btn:active:not(:disabled){opacity:.85} .iconbtn{width:var(--tap);height:var(--tap);display:grid;place-items:center; border-radius:10px;color:var(--fg-mute)} .iconbtn svg{width:22px;height:22px} .iconbtn:disabled{opacity:.3} /* ---------------------------------------------------------------- chrome --- */ .app{min-height:100dvh;display:flex;flex-direction:column} .top{position:sticky;top:0;z-index:20;background:var(--bg); padding-top:env(safe-area-inset-top);border-bottom:1px solid var(--line)} .top__row{display:flex;align-items:center;gap:8px;padding:6px 8px} .top__id{flex:1 1 auto;text-align:center;min-width:0} .top__step{display:block;font-size:15px;font-weight:600} .top__of{display:block;font-size:12px;color:var(--fg-faint);letter-spacing:.1em; text-transform:uppercase} /* 3px, not 2px: five gradient stops in a 2px line is an expensive way to draw a flat colour. */ .progress{height:3px;background:var(--line)} /* background-size pins the ramp to the viewport so the bar REVEALS the gradient as it grows. Without it the whole ramp is squashed into 12% of the screen at step 1 and stretches on every step, which reads as the colour changing. */ .progress__bar{height:100%;width:0;background:var(--grad-gold); background-size:100vw 100%; transition:width .25s var(--ease-out)} .main{flex:1 1 auto;padding:26px var(--pad) 40px;max-width:620px;width:100%; margin:0 auto} .bottom{position:sticky;bottom:0;z-index:20;display:flex;gap:10px; padding:12px var(--pad) calc(12px + env(safe-area-inset-bottom)); background:linear-gradient(to top,var(--bg) 72%,rgba(14,14,16,0)); border-top:1px solid var(--line)} /* flex-end, not space-between: #btnPolish is hidden for now (see index.html) and space-between would strand the count on its own at the left edge. */ .note__foot{display:flex;justify-content:flex-end;align-items:center; margin-top:12px;gap:12px} .count{font-size:13px;color:var(--fg-faint)} /* ----------------------------------------------------------------- sheet --- */ .sheet{position:fixed;inset:0;z-index:60} .sheet__scrim{position:absolute;inset:0;background:rgba(0,0,0,.6)} .sheet__panel{position:absolute;left:0;right:0;bottom:0;max-height:88dvh; overflow-y:auto;background:var(--surface);border-radius:18px 18px 0 0; padding:10px var(--pad) calc(24px + env(safe-area-inset-bottom)); border-top:1px solid var(--line);--ring-fill:var(--surface)} .sheet__grab{width:38px;height:4px;border-radius:2px;background:var(--line-strong); margin:0 auto 18px} .sheet__note{font-size:13px;color:var(--fg-faint);margin:14px 0 22px} .sheet .btn--block{margin-top:10px} .toast{position:fixed;left:50%;transform:translateX(-50%); bottom:calc(84px + env(safe-area-inset-bottom));z-index:80; max-width:min(92vw,420px);padding:13px 18px;border-radius:10px; background:var(--plaster);color:var(--ink);font-size:15px;font-weight:500; box-shadow:0 8px 30px rgba(0,0,0,.45)} .toast--err{background:var(--danger);color:#2A0F0D} /* Every background-clip:text mark vanishes entirely under Windows High Contrast -- the glyphs are transparent and the ramp is discarded. The website pairs each clipped ramp with this; the app never did. */ @media (forced-colors:active){ .mark,.slot__n{background:none;color:CanvasText} .btn--primary{background:ButtonFace;color:ButtonText} .btn--ghost{background:none;border:1px solid ButtonBorder;color:ButtonText} .chip[aria-pressed="true"]{background:Highlight;color:HighlightText} .progress__bar{background:Highlight} } @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important} .chip:active{transform:none} }