/* ============================================================================ TWO-LENS SALES FLASH (2026-10-10) — painted by js/sf-two-lens.js into #sf-two-lens Same-store on the left, Budget on the right. Desktop: every block (band, scoreboards, platforms and regions, stores) is a two-column grid with one gap, so the halves line up down the page. Phone (≤600px): the band and scoreboards stack, the lower sections start closed, and each table row puts its name on top with the two lenses as two tinted columns under labelled headings. GSB Design System v3 tokens (gsb-tokens.css); the --sf-fs-* type scale comes from gsb-sales-flash-v3.css. ============================================================================ */ /* What the block replaces is hidden only once it has painted (.sf-tl-on on #newdev-screen). */ #newdev-screen.sf-tl-on #flash-masthead, #newdev-screen.sf-tl-on #newdev-split-panel, #newdev-screen.sf-tl-on #flash-mobile-top, #newdev-screen.sf-tl-on #sf-a2-lead, #newdev-screen.sf-tl-on #newdev-period-cmdbar-item { display: none !important; } #newdev-screen:not(.sf-tl-on) #sf-two-lens { display: none; } #newdev-screen #sf-two-lens { --tl-gap: 20px; --tl-pad: 22px; --tl-rule-strong: rgba(26, 30, 27, 0.45); --tl-bud-tint: #E2E9E1; display: flex; flex-direction: column; gap: 16px; margin: 4px 0 18px; font-family: var(--ds-font); color: var(--ds-ink); font-variant-numeric: tabular-nums lining-nums; } #sf-two-lens button { font-family: inherit; color: inherit; } #sf-two-lens .tl-cap { font-size: var(--sf-fs-label); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ds-muted); } #sf-two-lens .pos { color: var(--ds-accent-text); } #sf-two-lens .neg { color: var(--ds-danger-text); } #sf-two-lens .na { color: var(--ds-muted); } /* Lens marks: ○ same-store, ■ budget */ #sf-two-lens .tl-mk { display: inline-block; width: 10px; height: 10px; flex: none; box-sizing: border-box; } #sf-two-lens .tl-mk.ring { border: 2px solid var(--ds-moss); border-radius: 50%; } #sf-two-lens .tl-mk.sq { background: var(--ds-pine); } /* Delta pills: flat (z), small move (u1/d1), 3+ points (u2/d2), no figure (na) */ #sf-two-lens .tl-p { display: inline-block; min-width: 52px; box-sizing: border-box; padding: 2px 6px; text-align: center; font-size: var(--sf-fs-cell); font-weight: 500; line-height: 1.4; white-space: nowrap; } #sf-two-lens .tl-p.u2 { background: rgba(79, 122, 90, 0.28); color: var(--ds-forest); } #sf-two-lens .tl-p.u1 { background: rgba(79, 122, 90, 0.13); color: var(--ds-accent-text); } #sf-two-lens .tl-p.z { background: rgba(26, 30, 27, 0.06); color: var(--ds-muted); } #sf-two-lens .tl-p.d1 { background: rgba(181, 83, 46, 0.13); color: var(--ds-danger-text); } #sf-two-lens .tl-p.d2 { background: rgba(181, 83, 46, 0.25); color: #7F3517; } #sf-two-lens .tl-p.na { background: none; color: var(--ds-muted); } /* ---- time-frame bar ---- */ #sf-two-lens .tl-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } #sf-two-lens .tl-top-cap { font-size: var(--sf-fs-chip); color: var(--ds-muted); } #sf-two-lens .tl-seg { display: inline-flex; background: var(--ds-mist); } #sf-two-lens .tl-seg button { border: 0; background: transparent; padding: 7px 18px; min-height: 34px; font-size: var(--sf-fs-cell); font-weight: 500; cursor: pointer; } #sf-two-lens .tl-seg button:hover { background: var(--ds-sage); } #sf-two-lens .tl-seg button.on { background: var(--ds-moss); color: var(--ds-snow); } #sf-two-lens button:focus-visible, #sf-two-lens [role="button"]:focus-visible { outline: 2px solid var(--ds-moss); outline-offset: 2px; } /* ---- band: the consolidated figures, one pine half per lens ---- */ #sf-two-lens .tl-band { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--tl-gap); } #sf-two-lens .tl-bh { background: var(--ds-pine); color: var(--ds-snow); padding: 14px var(--tl-pad); display: flex; flex-direction: column; gap: 12px; min-width: 0; } #sf-two-lens .tl-bhd { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; } #sf-two-lens .tl-bhd b { font-size: var(--sf-fs-section); font-weight: 600; letter-spacing: -0.01em; } #sf-two-lens .tl-bsub, #sf-two-lens .tl-bwhen { font-size: var(--sf-fs-chip); color: var(--ds-muted-pine); } #sf-two-lens .tl-bwhen { margin-left: auto; } #sf-two-lens .tl-bh .tl-mk.ring { border-color: var(--ds-leaf); } #sf-two-lens .tl-bh .tl-mk.sq { background: var(--ds-snow); } #sf-two-lens .tl-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } #sf-two-lens .tl-kpi { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; } #sf-two-lens .tl-bh .tl-cap { color: var(--ds-muted-pine); } #sf-two-lens .tl-kv { font-size: 24px; font-weight: 600; letter-spacing: -0.03em; line-height: 1; white-space: nowrap; } #sf-two-lens .tl-bh .tl-p.u2 { background: rgba(130, 187, 144, 0.34); color: #E5F1E7; } #sf-two-lens .tl-bh .tl-p.u1 { background: rgba(130, 187, 144, 0.18); color: #A8D1B1; } #sf-two-lens .tl-bh .tl-p.z { background: rgba(246, 247, 243, 0.10); color: var(--ds-mist); } #sf-two-lens .tl-bh .tl-p.d1 { background: rgba(227, 154, 126, 0.18); color: #F0B8A2; } #sf-two-lens .tl-bh .tl-p.d2 { background: rgba(227, 154, 126, 0.32); color: #FBE0D5; } #sf-two-lens .tl-bh .tl-p.na { color: var(--ds-muted-pine); } #sf-two-lens .tl-read { margin: 0; padding-top: 10px; border-top: 1px solid rgba(246, 247, 243, 0.14); font-size: var(--sf-fs-cell); line-height: 1.5; color: var(--ds-mist); } #sf-two-lens .tl-bh .pos { color: #A8D1B1; } #sf-two-lens .tl-bh .neg { color: #F0B8A2; } /* ---- shared two-column grid + panels (scoreboards, stores) ---- */ #sf-two-lens .tl-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--tl-gap); } #sf-two-lens .tl-panel { background: var(--ds-frost); padding: 16px var(--tl-pad) 14px; display: flex; flex-direction: column; gap: 12px; min-width: 0; } #sf-two-lens .tl-phd { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; } #sf-two-lens .tl-phd h3, #sf-two-lens .tl-hd h3 { margin: 0; font-size: var(--sf-fs-section); font-weight: 600; letter-spacing: -0.015em; display: inline-flex; align-items: center; gap: 9px; color: var(--ds-ink); } #sf-two-lens .tl-psub { font-size: var(--sf-fs-chip); color: var(--ds-muted); } /* scoreboard matrix: Sales / Traffic / Check × Day · 7D · 28D · YTD */ #sf-two-lens .tl-mx { display: grid; grid-template-columns: 64px repeat(4, minmax(0, 1fr)); } #sf-two-lens .tl-mcorner { border-top: 2px solid transparent; border-bottom: 1px solid var(--tl-rule-strong); } #sf-two-lens .tl-mh { border: 0; border-top: 2px solid transparent; border-bottom: 1px solid var(--tl-rule-strong); background: transparent; padding: 6px 4px; text-align: center; cursor: pointer; } #sf-two-lens .tl-mh:hover { background: rgba(79, 122, 90, 0.07); } #sf-two-lens .tl-mh b { display: block; font-size: var(--sf-fs-cell); font-weight: 600; } #sf-two-lens .tl-mh span { display: block; margin-top: 1px; font-size: var(--sf-fs-chip); color: var(--ds-muted); white-space: nowrap; } #sf-two-lens .tl-mh.on, #sf-two-lens .tl-mc.on { background: rgba(79, 122, 90, 0.12); } #sf-two-lens .tl-mh.on { border-top-color: var(--ds-moss); } #sf-two-lens .tl-ml { display: flex; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--ds-rule); font-size: var(--sf-fs-body); font-weight: 500; } #sf-two-lens .tl-mc { padding: 7px 2px; text-align: center; border-bottom: 1px solid var(--ds-rule); } #sf-two-lens .tl-mc small { display: block; margin-top: 3px; font-size: var(--sf-fs-chip); } /* daily bars: one per day, ±14% scale, pinned days labelled above */ #sf-two-lens .tl-daily { display: flex; flex-direction: column; gap: 3px; } #sf-two-lens .tl-dhead { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; } #sf-two-lens .tl-dnote { font-size: var(--sf-fs-chip); color: var(--ds-muted); } #sf-two-lens .tl-dw { display: grid; grid-template-columns: repeat(28, minmax(0, 1fr)); gap: 2px; } #sf-two-lens .tl-dflag { position: relative; height: 13px; } #sf-two-lens .tl-dflag em { position: absolute; bottom: 0; left: 0; font-style: normal; font-size: 10px; color: #7A5A1E; white-space: nowrap; } #sf-two-lens .tl-dflag.r em { left: auto; right: 0; } #sf-two-lens .tl-dc { position: relative; height: 64px; } #sf-two-lens .tl-dc.wk { background: rgba(26, 30, 27, 0.045); } #sf-two-lens .tl-dz { position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(26, 30, 27, 0.3); } #sf-two-lens .tl-db { position: absolute; left: 1px; right: 1px; } #sf-two-lens .tl-db.up { background: var(--ds-moss); } #sf-two-lens .tl-db.dn { background: var(--ds-clay); } #sf-two-lens .tl-dh { position: absolute; left: 50%; bottom: -6px; width: 4px; height: 4px; margin-left: -2px; background: var(--ds-ochre); } #sf-two-lens .tl-dlabs { margin-top: 5px; } #sf-two-lens .tl-dl { height: 12px; font-size: 10px; color: var(--ds-muted); white-space: nowrap; } #sf-two-lens .tl-pfoot { font-size: var(--sf-fs-chip); color: var(--ds-muted); } /* ---- platforms and regions: rows span both halves so they line up ---- */ #sf-two-lens .tl-sech { display: none; } #sf-two-lens .tl-tbl { display: flex; flex-direction: column; } #sf-two-lens .tl-r { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--tl-gap); } #sf-two-lens .tl-pn { display: none; } #sf-two-lens .tl-h { background-color: var(--ds-frost); padding: 0 var(--tl-pad); min-width: 0; } #sf-two-lens .tl-row .tl-h, #sf-two-lens .tl-ch .tl-h { display: grid; grid-template-columns: minmax(0, 1.5fr) 58px 58px 58px minmax(56px, 1fr) 42px 74px; column-gap: 8px; align-items: center; } #sf-two-lens .tl-hd .tl-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding-top: 16px; padding-bottom: 6px; } #sf-two-lens .tl-gl .tl-h { padding-top: 12px; padding-bottom: 4px; font-size: var(--sf-fs-label); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; } /* hairlines sit inside the half's padding (a 1px image line, not a border, so they stop at the content edge) */ #sf-two-lens .tl-ch .tl-h { background-image: linear-gradient(var(--tl-rule-strong), var(--tl-rule-strong)); background-repeat: no-repeat; background-position: center bottom; background-size: calc(100% - 2 * var(--tl-pad)) 1px; } #sf-two-lens .tl-row .tl-h { background-image: linear-gradient(var(--ds-rule), var(--ds-rule)); background-repeat: no-repeat; background-position: center bottom; background-size: calc(100% - 2 * var(--tl-pad)) 1px; } #sf-two-lens .tl-ch .tl-h span { padding-bottom: 7px; font-size: 10.5px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ds-muted); text-align: center; white-space: nowrap; } #sf-two-lens .tl-ch .tl-h span:first-child { text-align: left; } #sf-two-lens .tl-ch .tl-h span:nth-child(n+6) { text-align: right; } #sf-two-lens .tl-row .tl-h { padding-top: 6px; padding-bottom: 6px; min-height: 36px; } #sf-two-lens .tl-row.tap { cursor: pointer; } #sf-two-lens .tl-row.tap:hover .tl-h { background-color: #E4EAE2; } #sf-two-lens .tl-row.open .tl-h { background-color: #E6ECE4; } #sf-two-lens .tl-row.tot .tl-h { background-image: linear-gradient(var(--tl-rule-strong), var(--tl-rule-strong)); background-position: center top; } #sf-two-lens .tl-nm { display: flex; align-items: center; gap: 6px; min-width: 0; } #sf-two-lens .tl-nm .sf-bbar, #sf-two-lens .tl-pn .sf-bbar { margin-right: 2px; height: 22px; vertical-align: middle; flex: none; } #sf-two-lens .tl-nmt { min-width: 0; } #sf-two-lens .tl-nmt b { display: block; font-size: var(--sf-fs-body); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #sf-two-lens .tl-nmt b em { margin-left: 6px; font-style: normal; font-weight: 400; font-size: var(--sf-fs-chip); color: var(--ds-muted); } #sf-two-lens .tl-nmt small { display: block; margin-top: 1px; font-size: var(--sf-fs-chip); color: var(--ds-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #sf-two-lens .tl-chev { width: 10px; flex: none; font-size: 10px; color: var(--ds-muted); } #sf-two-lens .lv1 .tl-nm { padding-left: 14px; } #sf-two-lens .lv2 .tl-nm { padding-left: 28px; } #sf-two-lens .lv1 .tl-nmt b, #sf-two-lens .lv2 .tl-nmt b { font-weight: 500; } #sf-two-lens .tl-cs, #sf-two-lens .tl-ct, #sf-two-lens .tl-cc { text-align: center; } #sf-two-lens .tl-ct em, #sf-two-lens .tl-cc em { display: none; } #sf-two-lens .tl-tr { position: relative; height: 12px; } #sf-two-lens .tl-z0 { position: absolute; left: 50%; top: -6px; bottom: -6px; width: 1px; background: var(--tl-rule-strong); } #sf-two-lens .tl-bar { position: absolute; top: 0; bottom: 0; } #sf-two-lens .tl-bar.up { background: var(--ds-moss); } #sf-two-lens .tl-bar.dn { background: var(--ds-clay); } #sf-two-lens .tl-bar.tot { background: var(--ds-pine); } #sf-two-lens .tl-pts, #sf-two-lens .tl-gap { text-align: right; font-size: var(--sf-fs-cell); font-weight: 500; white-space: nowrap; } #sf-two-lens .tl-row.tot .tl-pts, #sf-two-lens .tl-row.tot .tl-gap, #sf-two-lens .tl-row.tot .tl-nmt b { font-weight: 700; } #sf-two-lens .tl-ft .tl-h { padding-top: 10px; padding-bottom: 16px; } #sf-two-lens .tl-ft p { margin: 0; font-size: var(--sf-fs-chip); line-height: 1.5; color: var(--ds-muted); } #sf-two-lens .tl-flink { border: 0; background: none; padding: 0; font-size: inherit; color: var(--ds-accent-text); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; } /* ---- stores moving each lens ---- */ #sf-two-lens .tl-mvg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; } #sf-two-lens .tl-gl2 { padding-bottom: 4px; font-size: var(--sf-fs-label); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; } #sf-two-lens .tl-mv { display: grid; grid-template-columns: minmax(0, 1fr) auto 66px; column-gap: 8px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--ds-rule); cursor: pointer; } #sf-two-lens .tl-mv:hover { background: #E4EAE2; } #sf-two-lens .tl-mvn { min-width: 0; } #sf-two-lens .tl-mvn b { display: block; font-size: var(--sf-fs-cell); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #sf-two-lens .tl-mvn small { font-size: var(--sf-fs-chip); color: var(--ds-muted); } #sf-two-lens .tl-none { padding: 6px 0; font-size: var(--sf-fs-chip); color: var(--ds-muted); } #sf-two-lens .tl-all { align-self: flex-start; font-size: var(--sf-fs-cell); font-weight: 500; color: var(--ds-accent-text); } /* ---- the Compare control, now with the lower sections it drives ---- */ #newdev-screen #sf-tl-lower { display: flex; align-items: center; gap: 10px; margin: 18px 0 4px; padding: 10px 16px; background: var(--ds-frost); } #newdev-screen #sf-tl-lower .cmdbar-item { display: flex; flex-direction: row; align-items: center; gap: 10px; flex-wrap: wrap; } #newdev-screen #sf-tl-lower .cmdbar-label { font-size: var(--sf-fs-label); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ds-muted); } /* ============================================================================ PHONE (≤600px): top stacks vertically; lower sections start closed; table rows show the name, then Same-store and Budget as two tinted, labelled columns. ============================================================================ */ @media (max-width: 600px) { #newdev-screen #sf-two-lens { --tl-gap: 6px; --tl-pad: 12px; gap: 12px; margin-top: 2px; } #sf-two-lens .tl-top { flex-direction: column; align-items: stretch; gap: 6px; } #sf-two-lens .tl-top-cap { order: 2; } #sf-two-lens .tl-seg { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); } #sf-two-lens .tl-seg button { min-height: 44px; font-size: 14px; padding: 0; } #sf-two-lens .tl-band { grid-template-columns: 1fr; gap: 8px; } #sf-two-lens .tl-bh { padding: 12px 14px; gap: 10px; } #sf-two-lens .tl-kv { font-size: 20px; } #sf-two-lens .tl-bwhen { margin-left: 0; width: 100%; } #sf-two-lens .tl-grid { grid-template-columns: 1fr; gap: 12px; } #sf-two-lens .tl-panel { padding: 12px 12px 10px; } #sf-two-lens .tl-mx { grid-template-columns: 56px repeat(4, minmax(0, 1fr)); } #sf-two-lens .tl-mh { min-height: 40px; } #sf-two-lens .tl-mh span { display: none; } #sf-two-lens .tl-mc .tl-p { min-width: 0; width: 100%; padding: 2px 2px; font-size: 11.5px; } #sf-two-lens .tl-mc small { font-size: 10.5px; } #sf-two-lens .tl-dnote { display: none; } #sf-two-lens .tl-dw { gap: 1px; } #sf-two-lens .tl-dc { height: 48px; } /* sections below the top start closed; the header row opens them */ #sf-two-lens .tl-sech { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 52px; padding: 10px 14px; border: 0; background: var(--ds-frost); text-align: left; cursor: pointer; } #sf-two-lens .tl-sech b { display: block; font-size: 15px; font-weight: 600; } #sf-two-lens .tl-sech small { display: block; margin-top: 2px; font-size: 12px; color: var(--ds-muted); } #sf-two-lens .tl-sec:not(.on) .tl-secb { display: none; } #sf-two-lens .tl-sec.on .tl-sech { margin-bottom: 6px; } /* table rows: name across the top, then the two lens columns */ #sf-two-lens .tl-hd, #sf-two-lens .tl-ft, #sf-two-lens .tl-gl .tl-h, #sf-two-lens .tl-ch .tl-h { display: none; } #sf-two-lens .tl-pn { display: block; grid-column: 1 / -1; min-width: 0; } #sf-two-lens .tl-gl .tl-pn { padding: 12px 2px 6px; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; } #sf-two-lens .tl-ch .tl-pn { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--tl-gap); margin-bottom: 2px; } #sf-two-lens .tl-chl { display: flex; align-items: center; gap: 7px; padding: 9px 10px; font-size: 13px; font-weight: 600; } #sf-two-lens .tl-chl.tl-sss { background: var(--ds-frost); border-top: 3px solid var(--ds-moss); } #sf-two-lens .tl-chl.tl-budget { background: var(--tl-bud-tint); border-top: 3px solid var(--ds-pine); } #sf-two-lens .tl-nm { display: none; } #sf-two-lens .tl-row { margin-top: 2px; } #sf-two-lens .tl-row .tl-pn { display: flex; align-items: center; gap: 6px; padding: 9px 2px 5px; } #sf-two-lens .tl-row.lv1 .tl-pn { padding-left: 14px; } #sf-two-lens .tl-row.lv2 .tl-pn { padding-left: 26px; } #sf-two-lens .tl-row .tl-h { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "s g" "t c"; row-gap: 5px; column-gap: 6px; padding: 7px 8px; min-height: 0; background-image: none; } #sf-two-lens .tl-row .tl-h.tl-budget { background-color: var(--tl-bud-tint); } #sf-two-lens .tl-row.tap:hover .tl-h, #sf-two-lens .tl-row.open .tl-h { background-color: var(--ds-mist); } #sf-two-lens .tl-row.tot .tl-h { background-image: none; } #sf-two-lens .tl-row.tot .tl-pn { border-top: 1px solid var(--tl-rule-strong); margin-top: 6px; } #sf-two-lens .tl-row .tl-cs { grid-area: s; text-align: left; } #sf-two-lens .tl-row .tl-gap { grid-area: g; align-self: center; font-size: 12px; } #sf-two-lens .tl-row .tl-ct { grid-area: t; text-align: left; } #sf-two-lens .tl-row .tl-cc { grid-area: c; text-align: right; } #sf-two-lens .tl-ct em, #sf-two-lens .tl-cc em { display: inline; margin-right: 4px; font-style: normal; font-size: 10.5px; color: var(--ds-muted); } #sf-two-lens .tl-ct .tl-p, #sf-two-lens .tl-cc .tl-p { min-width: 0; padding: 1px 4px; font-size: 11px; } #sf-two-lens .tl-tr, #sf-two-lens .tl-pts { display: none; } #sf-two-lens .tl-nmt small { white-space: normal; } #sf-two-lens .tl-mvg { column-gap: 12px; } #sf-two-lens .tl-mv { grid-template-columns: minmax(0, 1fr) auto; min-height: 44px; } #sf-two-lens .tl-mv .tl-p { display: none; } #newdev-screen #sf-tl-lower { padding: 10px 12px; } }