/* ============================================================================ Site Focus — NETUM Q900 field program (route #/field). SPEC-q900-choreography.md §9 is the whole brief for this file: · minimum touch target 48x48 px; primary confirm >= 64 px tall, full width · primary actions live in the BOTTOM THIRD (one-handed, gloved) · high contrast — readable in a dark electrical room AND in daylight · the scan field is always focused (JS does that; CSS keeps it visible) TOKEN SCOPING (HANDOFF "CSS TOKEN SCOPING"): the app's --sf-* / --lt-* tokens live on `.sf-root, .lt-root`. The field shell is appended to , so it inherits NONE of them. Every colour and metric this file uses is declared here on `.fld-root`. Nothing below may reference an --sf-* or --lt-* token. ==========================================================================*/ .fld-root { /* ---- ground & ink -------------------------------------------------- */ --fld-bg: #06090d; /* near-black: least glare in a dark room */ --fld-surface: #151c25; --fld-surface2: #1e2833; --fld-surface3: #2a3644; --fld-line: #3a4857; --fld-line2: #556577; --fld-ink: #ffffff; /* 19:1 on --fld-bg */ --fld-ink2: #c8d3df; /* 12:1 — "muted" that is still readable */ --fld-ink3: #93a2b3; /* 6.5:1 — smallest text only */ /* ---- meaning ------------------------------------------------------- */ --fld-accent: #4d9bff; --fld-accent-ink: #06090d; --fld-ok: #2fbf5f; --fld-ok-ink: #04120a; --fld-warn: #ffb020; --fld-warn-ink: #1a1200; --fld-danger: #ff5a52; --fld-danger-ink: #1a0503; /* ---- metrics (§9) -------------------------------------------------- */ --fld-tap: 48px; /* absolute minimum touch target */ --fld-ctl: 56px; /* ordinary control height */ --fld-primary: 68px; /* primary confirm — spec floor is 64px */ --fld-gap: 10px; --fld-pad: 12px; --fld-radius: 12px; position: fixed; inset: 0; z-index: 40; display: flex; flex-direction: column; overflow: hidden; background: var(--fld-bg); color: var(--fld-ink); font-family: system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size: 17px; line-height: 1.35; -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: rgba(77, 155, 255, .25); } /* The SPA page element behind the shell is dead weight while the field program is mounted; hide it and stop the document scrolling behind. */ .page-field { display: none !important; } body.fld-on { overflow: hidden; } .fld-root *, .fld-root *::before, .fld-root *::after { box-sizing: border-box; } .fld-root button, .fld-root input, .fld-root textarea, .fld-root select { font-family: inherit; } /* ---------------------------------------------------------------- header */ .fld-head { display: flex; align-items: center; gap: 6px; min-height: 52px; padding: 4px 4px 4px 4px; background: var(--fld-surface); border-bottom: 1px solid var(--fld-line); padding-top: max(4px, env(safe-area-inset-top)); } .fld-head-title { flex: 1; min-width: 0; padding: 0 2px; } .fld-head-title b { display: block; font-size: 17px; font-weight: 800; letter-spacing: .01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fld-head-title span { display: block; font-size: 12px; color: var(--fld-ink3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Square icon buttons in the header still honour the 48x48 floor. */ .fld-icon { flex: 0 0 auto; width: var(--fld-tap); height: var(--fld-tap); min-width: var(--fld-tap); min-height: var(--fld-tap); display: flex; align-items: center; justify-content: center; font-size: 22px; line-height: 1; color: var(--fld-ink); background: var(--fld-surface2); border: 1px solid var(--fld-line); border-radius: 10px; cursor: pointer; } .fld-icon:active { background: var(--fld-surface3); } /* ------------------------------------------------------------- scan bar */ /* The one input the hardware trigger types into. It is never re-created, so focus survives every screen change (see field.js `shell`). */ .fld-scanwrap { padding: var(--fld-pad); background: var(--fld-surface); border-bottom: 1px solid var(--fld-line); } .fld-scanrow { display: flex; align-items: stretch; gap: 8px; } .fld-scan { flex: 1; min-width: 0; min-height: 60px; padding: 8px 12px; font-size: 19px; font-weight: 700; font-family: Consolas, "Cascadia Mono", "Roboto Mono", monospace; letter-spacing: .02em; color: var(--fld-ink); background: #0d141c; border: 2px solid var(--fld-accent); border-radius: var(--fld-radius); outline: none; } .fld-scan::placeholder { color: var(--fld-ink3); font-weight: 600; letter-spacing: 0; } .fld-scan:focus { border-color: var(--fld-ok); box-shadow: 0 0 0 3px rgba(47, 191, 95, .3); } /* "the trigger is live" tell — green only while the field actually holds focus */ .fld-live { flex: 0 0 auto; width: 60px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 10px; font-weight: 800; letter-spacing: .06em; color: var(--fld-ink3); background: #0d141c; border: 1px solid var(--fld-line); border-radius: var(--fld-radius); } .fld-live i { width: 14px; height: 14px; border-radius: 50%; background: var(--fld-line2); } .fld-root.is-live .fld-live { color: var(--fld-ok); border-color: var(--fld-ok); } .fld-root.is-live .fld-live i { background: var(--fld-ok); box-shadow: 0 0 8px var(--fld-ok); } /* "Every screen states what scan it is waiting for" (§9). */ .fld-waiting { display: flex; gap: 8px; align-items: baseline; margin-top: 9px; padding: 9px 11px; font-size: 15px; color: var(--fld-ink); background: rgba(255, 176, 32, .13); border: 1px solid rgba(255, 176, 32, .5); border-left: 5px solid var(--fld-warn); border-radius: 8px; } .fld-waiting b { flex: 0 0 auto; font-size: 11px; font-weight: 800; letter-spacing: .08em; color: var(--fld-warn); } .fld-waiting span { flex: 1; min-width: 0; overflow-wrap: anywhere; } /* --------------------------------------------------------------- banner */ /* The plain-language answer to a valid-but-unexpected scan (§1). Lives above the fold and stays until the next scan — never a bare error. */ .fld-banner { margin: 0 var(--fld-pad) var(--fld-gap); padding: 11px 13px; border-radius: 10px; border: 1px solid var(--fld-line2); border-left: 6px solid var(--fld-line2); background: var(--fld-surface2); font-size: 16px; overflow-wrap: anywhere; } .fld-banner b { display: block; font-size: 17px; font-weight: 800; margin-bottom: 2px; } .fld-banner.ok { border-color: var(--fld-ok); background: rgba(47, 191, 95, .14); } .fld-banner.warn { border-color: var(--fld-warn); background: rgba(255, 176, 32, .14); } .fld-banner.danger { border-color: var(--fld-danger); background: rgba(255, 90, 82, .16); } .fld-banner.info { border-color: var(--fld-accent); background: rgba(77, 155, 255, .14); } .fld-topline { margin: 0; padding: 9px var(--fld-pad); font-size: 15px; font-weight: 700; text-align: center; } .fld-topline.off { background: var(--fld-danger); color: var(--fld-danger-ink); } .fld-topline.busy { background: var(--fld-accent); color: var(--fld-accent-ink); } /* ----------------------------------------------------------------- body */ .fld-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; padding: var(--fld-pad) var(--fld-pad) 18px; } .fld-body > * + * { margin-top: var(--fld-gap); } .fld-sec { margin: 16px 0 6px; font-size: 12px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--fld-ink3); } .fld-body > .fld-sec:first-child { margin-top: 2px; } .fld-card { /* `display` and `white-space` are declared on purpose: app.css owns bare class names (`.flag` is `inline-block; nowrap`), and a modifier that collided with one silently turned this card into a 1080px-wide line. Every modifier in this file is `fld-`-prefixed for the same reason. */ display: block; white-space: normal; padding: 13px; background: var(--fld-surface); border: 1px solid var(--fld-line); border-radius: var(--fld-radius); overflow-wrap: anywhere; } .fld-card.hero { border-color: var(--fld-accent); border-width: 2px; background: var(--fld-surface2); } .fld-card.fld-flag { border-color: var(--fld-warn); border-width: 2px; } .fld-h1 { margin: 0 0 4px; font-size: 25px; font-weight: 800; line-height: 1.15; overflow-wrap: anywhere; } .fld-h2 { margin: 0 0 3px; font-size: 19px; font-weight: 800; overflow-wrap: anywhere; } .fld-p { margin: 0; font-size: 16px; color: var(--fld-ink2); overflow-wrap: anywhere; } .fld-p + .fld-p { margin-top: 6px; } .fld-tiny { font-size: 13px; color: var(--fld-ink3); overflow-wrap: anywhere; } .fld-mono { font-family: Consolas, "Cascadia Mono", "Roboto Mono", monospace; } .fld-big-num { font-size: 34px; font-weight: 800; line-height: 1; letter-spacing: .02em; } /* rows that are themselves tappable (plan list, key list, point list) */ .fld-row { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 62px; padding: 10px 12px; text-align: left; color: var(--fld-ink); background: var(--fld-surface); border: 1px solid var(--fld-line); border-radius: var(--fld-radius); cursor: pointer; font-size: 17px; } .fld-row:active { background: var(--fld-surface3); } .fld-row .grow { flex: 1; min-width: 0; } .fld-row .grow b { display: block; font-weight: 700; overflow-wrap: anywhere; } .fld-row .chev { flex: 0 0 auto; color: var(--fld-ink3); font-size: 22px; } .fld-list { display: flex; flex-direction: column; gap: 8px; } /* point list on the Plan screen: current point large, the rest small (§8.2) */ .fld-point { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--fld-line); background: var(--fld-surface); font-size: 15px; color: var(--fld-ink2); width: 100%; text-align: left; cursor: pointer; min-height: var(--fld-tap); } .fld-point .n { flex: 0 0 auto; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 13px; font-weight: 800; background: var(--fld-surface3); color: var(--fld-ink2); } .fld-point.done .n { background: var(--fld-ok); color: var(--fld-ok-ink); } .fld-point.cur { border-color: var(--fld-accent); border-width: 2px; background: var(--fld-surface2); color: var(--fld-ink); font-size: 21px; font-weight: 700; min-height: 76px; align-items: center; } .fld-point.cur .n { width: 34px; height: 34px; font-size: 16px; background: var(--fld-accent); color: var(--fld-accent-ink); } .fld-point .grow { flex: 1; min-width: 0; overflow-wrap: anywhere; } /* progress */ .fld-prog { height: 12px; border-radius: 6px; background: var(--fld-surface3); overflow: hidden; } .fld-prog i { display: block; height: 100%; background: var(--fld-ok); } /* pills */ .fld-pill { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; background: var(--fld-surface3); color: var(--fld-ink2); white-space: nowrap; } .fld-pill.ok { background: var(--fld-ok); color: var(--fld-ok-ink); } .fld-pill.warn { background: var(--fld-warn); color: var(--fld-warn-ink); } .fld-pill.danger { background: var(--fld-danger); color: var(--fld-danger-ink); } .fld-pill.info { background: var(--fld-accent); color: var(--fld-accent-ink); } /* -------------------------------------------------------------- buttons */ .fld-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: var(--fld-ctl); min-width: var(--fld-tap); padding: 10px 14px; font-size: 18px; font-weight: 700; color: var(--fld-ink); background: var(--fld-surface2); border: 1px solid var(--fld-line2); border-radius: var(--fld-radius); cursor: pointer; text-align: center; text-decoration: none; overflow-wrap: anywhere; } .fld-btn:active { transform: translateY(1px); } .fld-btn[disabled] { opacity: .45; cursor: default; } .fld-btn.big { min-height: var(--fld-primary); font-size: 21px; font-weight: 800; } .fld-btn.primary { background: var(--fld-accent); color: var(--fld-accent-ink); border-color: var(--fld-accent); } .fld-btn.go { background: var(--fld-ok); color: var(--fld-ok-ink); border-color: var(--fld-ok); } .fld-btn.warn { background: var(--fld-warn); color: var(--fld-warn-ink); border-color: var(--fld-warn); } .fld-btn.danger { background: var(--fld-danger); color: var(--fld-danger-ink); border-color: var(--fld-danger); } .fld-btn small { display: block; font-size: 13px; font-weight: 600; opacity: .85; } .fld-btn .lbl { display: flex; flex-direction: column; align-items: center; gap: 1px; } .fld-btns { display: flex; flex-direction: column; gap: 8px; } .fld-btns.two { flex-direction: row; } .fld-btns.two > * { flex: 1 1 0; min-width: 0; } /* ------------------------------------------------------- footer (§9) --- */ /* Primary confirm lives here: full width, >= 64px, bottom third of screen. */ .fld-foot { flex: 0 0 auto; padding: 10px var(--fld-pad); padding-bottom: max(10px, env(safe-area-inset-bottom)); background: var(--fld-surface); border-top: 1px solid var(--fld-line); display: flex; flex-direction: column; gap: 8px; } .fld-foot:empty { display: none; } /* --------------------------------------------------------------- inputs */ .fld-field { display: block; } .fld-field > label { display: block; margin-bottom: 5px; font-size: 13px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--fld-ink3); } .fld-input, .fld-ta, .fld-sel { display: block; width: 100%; min-height: var(--fld-ctl); padding: 10px 12px; font-size: 18px; color: var(--fld-ink); background: #0d141c; border: 1px solid var(--fld-line2); border-radius: 10px; outline: none; } .fld-ta { min-height: 84px; resize: vertical; line-height: 1.35; } .fld-input:focus, .fld-ta:focus, .fld-sel:focus { border-color: var(--fld-accent); box-shadow: 0 0 0 3px rgba(77, 155, 255, .3); } .fld-input::placeholder, .fld-ta::placeholder { color: var(--fld-ink3); } .fld-form { display: flex; flex-direction: column; gap: 12px; } /* the signature pad from app/js/sig.js */ .fld-sig { display: block; width: 100%; height: 170px; background: #fff; border: 2px solid var(--fld-line2); border-radius: 10px; touch-action: none; } /* --------------------------------------------------------- bottom sheet */ /* Field dialogs are sheets, not centre modals: the controls land under the thumb. Sheets are appended INSIDE .fld-root so they inherit --fld-*. */ .fld-sheet-back { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; justify-content: flex-end; background: rgba(0, 0, 0, .66); } .fld-sheet { display: flex; flex-direction: column; max-height: 92%; background: var(--fld-surface); border-top: 2px solid var(--fld-line2); border-radius: 16px 16px 0 0; } .fld-sheet-head { display: flex; align-items: center; gap: 8px; padding: 10px 8px 10px var(--fld-pad); border-bottom: 1px solid var(--fld-line); } .fld-sheet-head h3 { flex: 1; margin: 0; font-size: 19px; font-weight: 800; overflow-wrap: anywhere; } .fld-sheet-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: var(--fld-pad); } .fld-sheet-body > * + * { margin-top: 12px; } .fld-sheet-foot { flex: 0 0 auto; display: flex; flex-direction: column; gap: 8px; padding: 10px var(--fld-pad); padding-bottom: max(10px, env(safe-area-inset-bottom)); border-top: 1px solid var(--fld-line); } /* ---------------------------------------------------------------- toast */ .fld-toasts { position: absolute; left: 0; right: 0; bottom: 96px; z-index: 9; display: flex; flex-direction: column; gap: 6px; padding: 0 var(--fld-pad); pointer-events: none; } .fld-toast { padding: 12px 14px; border-radius: 10px; font-size: 16px; font-weight: 700; color: var(--fld-ink); background: var(--fld-surface3); border: 1px solid var(--fld-line2); box-shadow: 0 10px 26px rgba(0, 0, 0, .5); overflow-wrap: anywhere; } .fld-toast.ok { background: var(--fld-ok); color: var(--fld-ok-ink); border-color: var(--fld-ok); } .fld-toast.warn { background: var(--fld-warn); color: var(--fld-warn-ink); border-color: var(--fld-warn); } .fld-toast.danger { background: var(--fld-danger); color: var(--fld-danger-ink); border-color: var(--fld-danger); } /* ------------------------------------------------------------ misc bits */ .fld-kv { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 8px 0 0; font-size: 15px; } .fld-kv div { min-width: 0; } .fld-kv i { display: block; font-style: normal; font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--fld-ink3); } .fld-kv b { font-weight: 700; overflow-wrap: anywhere; } .fld-empty { padding: 22px 12px; text-align: center; color: var(--fld-ink3); font-size: 16px; } .fld-thumb { width: 56px; height: 56px; border-radius: 8px; object-fit: cover; border: 1px solid var(--fld-line2); } /* Anything with real horizontal content scrolls inside its own box so the document itself never scrolls sideways. */ .fld-scrollx { overflow-x: auto; max-width: 100%; } /* Very narrow phones (the Q900 is ~360 CSS px): shave type, never targets. */ @media (max-width: 370px) { .fld-root { font-size: 16px; } .fld-h1 { font-size: 22px; } .fld-btn { font-size: 17px; } .fld-btn.big { font-size: 19px; } .fld-scan { font-size: 17px; } .fld-point.cur { font-size: 19px; } }